教你如何用天翼云盘做网站,个人建设网站难吗,wordpress 还原主题,免费云虚拟主机1►新增带Layout组件的页面
直接在views文件夹下面新增weather.vue。然后随便写一个123#xff0c;现在先让我们页面能跳过去先。 让页面能跳过去#xff0c;有好几种方法#xff1a;
1、在菜单管理自己添加一个菜单#xff0c;然后把菜单分配给某个角色#xff0c;再把…1►新增带Layout组件的页面
直接在views文件夹下面新增weather.vue。然后随便写一个123现在先让我们页面能跳过去先。 让页面能跳过去有好几种方法
1、在菜单管理自己添加一个菜单然后把菜单分配给某个角色再把该角色分给某个人。【然而超级管理员什么时候都能看到此菜单因为超级管理员能无视一切权限问题】
2、在路由文件router/index.js直接写相关路由然后可以手动切换浏览器网址进入该路由。 本次例子利用使用自己添加菜单的方法这样比较简单。简单如下图
组件地址默认是views目录下面的文件
路由地址点击这个功能访问的url
意思就是点击这个路由地址可以进入这个组件 组件路径一定要写对写不对直接进不去相应的组件。路由地址可以乱写但是起码也要有点“path”的样子吧
先随便在weather.vue写一句话来测试一下 发现页面也出来了 现在我们可以开始专注页面了。
2►专注weather业务
首先.vue文件的代码如下
templatediv v-loadingloadingel-row stylemargin-top: 30px; :gutter20el-col :offset10 :span4el-button typesuccess clickhandleWeather当前城市天气/el-button/el-col/el-rowel-row :gutter20 v-ifcity.length0el-col :offset2 :span20el-descriptions title当前实时天气el-descriptions-item label当前城市{{ city }}/el-descriptions-itemel-descriptions-item label温度{{ weather.realtime.temperature }}℃/el-descriptions-itemel-descriptions-item label风向{{ weather.realtime.direct }}/el-descriptions-itemel-descriptions-item label风力{{ weather.realtime.power }}/el-descriptions-itemel-descriptions-item label湿度{{ weather.realtime.humidity }}%/el-descriptions-itemel-descriptions-item label天气状况{{ weather.realtime.info }}/el-descriptions-item/el-descriptions/el-col/el-rowel-row v-foritem in weather.future :keyitem.date stylemargin-top: 30px; :gutter20el-col :offset2 :span20el-descriptions :titleitem.date :column4el-descriptions-item label风向{{ item.direct }}/el-descriptions-itemel-descriptions-item label温度{{ item.temperature }}/el-descriptions-itemel-descriptions-item label天气情况{{ item.weather }}/el-descriptions-item/el-descriptions/el-col/el-row/div
/templatescript
import {getWeather} from /api/gzh/weather;export default {name: weather,data() {return {loading:false,city: ,weather: {realtime: {},future: []}}},methods: {handleWeather() {this.loadingtrue;getWeather().then(res {const weatherInfo JSON.parse(res.msg);this.city weatherInfo.result.citythis.weather.realtime weatherInfo.result.realtimethis.weather.future weatherInfo.result.futureconsole.log(weatherInfo)this.loadingflase;}).catch(err {console.error(err)})}}
}
/scriptstyle scoped/style然后是前端api调用代码 import request from /utils/request;
// 查询参数列表export function getWeather() { return request({ url: /getWeatherByLocalIP, method: get, })} 接下来是后端的工具类代码 package com.ruoyi.web.controller.gzh;import com.ruoyi.common.core.domain.AjaxResult;
import com.ruoyi.common.utils.http.HttpUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;RestController
public class WeatherController {GetMapping(/getWeatherByLocalIP)public AjaxResult getWeather() throws UnsupportedEncodingException {AjaxResult result AjaxResult.success();String localCityName GetLocationAndIP.getLocalCityName();//调用天气APIString encodeCity URLEncoder.encode(localCityName, UTF-8);System.out.println(encodeCity);String url http://apis.juhe.cn/simpleWeather/query?city encodeCity key81fe33a6077267b2e4ae2967af47eeb7;String weatherInfo HttpUtils.sendGet(url);result.put(msg, weatherInfo);return result;}}
然后是后端接口的代码 package com.ruoyi.web.controller.gzh;import org.json.JSONException;
import org.json.JSONObject;import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.nio.charset.StandardCharsets;
import java.util.HashMap;
import java.util.Map;
import java.util.regex.Matcher;
import java.util.regex.Pattern;public class GetLocationAndIP {private static String readAll(BufferedReader rd) throws IOException {StringBuilder sb new StringBuilder();int cp;while ((cp rd.read()) ! -1) {sb.append((char) cp);}return sb.toString();}public static JSONObject readJsonFromUrl(String url) throws IOException, JSONException {try (InputStream is new URL(url).openStream()) {BufferedReader rd new BufferedReader(new InputStreamReader(is, StandardCharsets.UTF_8));String jsonText readAll(rd);return new JSONObject(jsonText);}}public MapString, Object getAddress() {String ip ;// 这个网址似乎不能了用了// String chinaz http://ip.chinaz.com;// 改用了太平洋的一个网址String chinaz http://whois.pconline.com.cn/;StringBuilder inputLine new StringBuilder();String read ;URL url null;HttpURLConnection urlConnection null;BufferedReader in null;MapString, Object map new HashMap();try {url new URL(chinaz);urlConnection (HttpURLConnection) url.openConnection();// 如有乱码的请修改相应的编码集这里是 gbkin new BufferedReader(new InputStreamReader(urlConnection.getInputStream(), gbk));while ((read in.readLine()) ! null) {inputLine.append(read).append(\r\n);}} catch (IOException e) {e.printStackTrace();} finally {if (in ! null) {try {in.close();} catch (IOException e) {e.printStackTrace();}}}// 这个是之前的正则表达式,// Pattern p Pattern.compile(\\dd class\\\fz24\(.*?)\\\\/dd);// 通过正则表达式匹配我们想要的内容根据拉取的网页内容不同正则表达式作相应的改变Pattern p Pattern.compile(显示IP地址为(.*?)的位置信息);Matcher m p.matcher(inputLine.toString());if (m.find()) {String ipstr m.group(0);// 这里根据具体情况来截取想要的内容ip ipstr.substring(ipstr.indexOf(为) 2, ipstr.indexOf(的) - 1);map.put(ip, ip);}JSONObject json null;try {// 这里调用百度的ip定位api服务 详见 http://api.map.baidu.com/lbsapi/cloud/ip-location-api.htmjson readJsonFromUrl(http://api.map.baidu.com/location/ip?aklaOQElaF53xGGBjscGtrd10nN4j1zGkiip ip);//city (((JSONObject) ((JSONObject) json.get(content)).get(address_detail)).get(city)).toString();map.put(city, ((JSONObject) ((JSONObject) json.get(content)).get(address_detail)).get(city).toString());} catch (Exception e) {e.printStackTrace();}return map;}public static String getLocalCityName() {GetLocationAndIP getLocationANDIp new GetLocationAndIP();MapString, Object map getLocationANDIp.getAddress();String city map.get(city).toString();return city.substring(0, city.length() - 1);}public static void main(String[] args) {GetLocationAndIP getLocationANDIp new GetLocationAndIP();MapString, Object map getLocationANDIp.getAddress();String city map.get(city).toString();String city_1 city.substring(0, city.length() - 1);System.out.println(city_1);}
}
补充依赖 dependencygroupIdorg.json/groupIdartifactIdjson/artifactIdversion20090211/version
/dependency 由此天气小demo就跑起来了效果图如下
