自己做的网站打不开怎么搞,dw网站开发环境,安能物流网站,瑞安微网站建设1.创建项目
创建一个新的 Vue 2 项目非常简单。在终端中#xff0c;进入您希望创建项目的目录(我的目录是D:\vue)#xff0c;并运行以下命令#xff1a;
vue create vue_test 2.切换到项目目录#xff0c;运行项目 运行成功后#xff0c;你将会看到以下的编译成功的提示…1.创建项目
创建一个新的 Vue 2 项目非常简单。在终端中进入您希望创建项目的目录(我的目录是D:\vue)并运行以下命令
vue create vue_test 2.切换到项目目录运行项目 运行成功后你将会看到以下的编译成功的提示并显示本地和局域网的访问地址 并使用VS Code打开项目项目的目录结果如下 在node.js的目录下安装axios,输入如下的命令 安装成功后会带有added的提示
你可以在Vue组件中使用axios发送请求。以下是一个简单的例子在App.vue中输入以下代码
templatedivbutton clickfetchDataFetch Data/buttondiv v-ifdataFetched Data: {{ data }}/div/div
/templatescript
import axios from axios;export default {data() {return {data: null,};},methods: {fetchData() {axios.get(http://192.168.110.174:30000/test/say).then(response {this.data response.data;}).catch(error {console.error(There was an error!, error);});},},
};
/script 单击页面上的“Fetch Data”按钮按钮下面显示Fetched Data:say my brother观察chrom浏览器的NetWork显示发送请求成功了 到此一个简单的Vue发送get请求的实例就完成了
3.遇到的问题
访问本地的接口出现了跨域问题 3.1解决方案
3.1.1后端方案
以SpringBoot项目为例
package com.health.manage.config;import org.springframework.stereotype.Component;import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;Component
public class SimpleCORSFilter implements Filter {Overridepublic void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {HttpServletRequest reqs (HttpServletRequest) req;String curOrigin reqs.getHeader(Origin);HttpServletResponse response (HttpServletResponse) res;response.setHeader(Access-Control-Allow-Origin, curOrigin null ? true : curOrigin);response.setHeader(Access-Control-Allow-Credentials, true);response.setHeader(Access-Control-Allow-Methods, POST, GET, OPTIONS, DELETE, HEAD);response.setHeader(Access-Control-Max-Age, 3600);response.setHeader(Access-Control-Allow-Headers, access-control-allow-origin, authority, content-type, version-info, X-Requested-With);response.setContentType(application/json;charsetUTF-8);chain.doFilter(req, res);}public void init(FilterConfig filterConfig) {}public void destroy() {}}
3.1.2.前端方案
1在vue.config.js中设置代理如下所示
module.exports {devServer: {proxy: {/api: { // 请求的代称写在Axios里的BaseUrltarget: http://192.168.110.174:30000, // 真实请求URlws: true,changeOrigin: true, // 允许跨域pathRewrite: { //替换通配/api的替换成对应字符// /* 重写路径当我们在浏览器中看到请求的地址为http://localhost:8080/api/core/getData/userInfo 时// 实际上访问的地址是http://localhost:8088/spring/core/getData/userInfo,因为重写了 /api// */^/api: //当你的接口中没有/api字眼时采用这种直接替换成空即可// ^/api: /api //当你的接口中刚好有/api 时采用这种方式}}}}
} 2在main.js中输入全局路径Vue.prototype.HOST /api;
import Vue from vue
import App from ./App.vueVue.config.productionTip false
Vue.prototype.HOST /api;new Vue({render: h h(App),
}).$mount(#app)(3)在App.vue中设置get请求
templatedivbutton clickfetchDataFetch Data/buttondiv v-ifdataFetched Data: {{ data }}/div/div
/templatescript
import axios from axios;export default {data() {return {data: null,};},methods: {fetchData() {axios.get(this.HOST/test/say).then(response {this.data response.data;}).catch(error {console.error(There was an error!, error);});},},
};
/script
4由于使用了代理页面访问的是http://localhost:8080/api/test/say实际访问的是http://192.168.110.174:30000/test/say完美解决了跨域问题
