Vue项目一学生管理系统环境的搭建
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
-
- 学生管理系统在功能实现方面，主要实现注册，登录以及登录调转到学生管理系统的主页。在左侧的导航路由实现页面跳转并且在右侧的主体区域显示管理的界面。
- 一、Vue项目的创建
-
- 1.创建项目
- 二、初始化项目
-
- 1.配置项目服务文件
- 2.安装第三方组件库
- 2.封装axios和解决跨域问题
- 3.解决跨域问题
- 总结
前言
学生管理系统在功能实现方面，主要实现注册，登录以及登录调转到学生管理系统的主页。在左侧的导航路由实现页面跳转并且在右侧的主体区域显示管理的界面。
一、Vue项目的创建
本项目是基于Vue框架进行开发的，所以应在全局安装Vue-CLI。
npm install -g @vue/[email protected]
安装好Vue-CLI后，通过指令查看Vue-CLI是否安装成功。
vue -V //V大写
如果显示vue不是内部命令则需要配置环境变量。
1.创建项目
使用命令创建msm项目
vue create msm
选择的第三个自定义项目，进行插件配置，利用空格来选择，上下键来切换位置，在选择完成后再点击enter回车，不要上来就点回车。如图所示。
项目创建完成后，就在msm目录下的终端中输入指令查看项目是否创建成功。当出现下图时表示创建成功。
npm run serve
二、初始化项目
1.配置项目服务文件
需要在vue.config.js文件中配置项目的端口，服务器的域名主机名，是否启用协议，是否在浏览器自动打开，格式检查和map文件的打包。
代码如下（示例）：
module.exports = {
devServer:{
port:8888, //端口号设置为8888
host:"localhost", //主机采用本地服务
https:false, //不会启用http协议
open:true, //浏览器自动打开
},
lintOnSave:false, //格式检查关闭
productionSourceMap:false, //map文件不会打包
}
2.安装第三方组件库
本项目需要使用axios实现后端数据的接收和进行异步请求，使用pubsub实现非父子组件的传值。使用ElementUI完成前端页面的组合。安装指令如下所示。
npm install -S axios pubsub-js element-ui
由于要使用ElementUI来完成页面，需要在msm目录下的main.js中使用import引入elemen，并通过Vue.use(ElementUI)来使用element。在VScode中安装扩展程序Element UI Snippets 插件实现element语法提示。
代码如下
import Vue from "vue";
import ElementUI from "element-ui"; //组件库
import 'element-ui/lib/theme-chalk/index.css' //样式
import App from "./App.vue";
import router from "./router";
Vue.use(ElementUI);
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
2.封装axios和解决跨域问题
使用axios完成组件的异步请求和后台数据的传递。我们需要自己封装一个axios来传递异步请求，并且在以后配置拦截器。在msm下的src目录下创建utils文件夹，在utils文件夹下，创建request.js文件来存放封装的axios。
import axios from 'axios';
//1....获取db.json数据的第一种方法，通过get获取数据
// axios.get("/db.json").then(response=>{
// console.log(response.data);
// })
//2.....获取db.json的第二种方法，通过调用axios方法获取数据
// axios({
// method:"get",
// url:"/db.json"
// }).then(response=>{
// console.log(response.data);
// })
// 3....获取db.json的第三种方法，通过自己封装一个axios来获取数据,其中request便是axios所起的变量名
const request = axios.create({
// baseURL:"/",
timeout:5000,
});
// 该方法使用在test.js中，
// request({ //这里的request就是axios.create方法所起的变量名
// method:"get" ,
// url:"/db.json"
// }).then(response=>{
// console.log(response.data);
// })
上述代码所传入的db.json是我们传入的的假数据，该文件存放在public文件夹下。
[
{"name": "小黑", "age": 18},
{"name": "小岳岳", "age": 28},
{"name": "林志玲", "age": 38}
]
封装好axios方法后，我们需要调用该方法即request(),在test.js中来进行异步请求获取db.json中的数据。
import request from "@/utils/request.js";
// request({ //这里的request就是axios.create方法所起的变量名
// method:"get" ,
// url:"/db.json"
// }).then(response=>{
// console.log(response.data);
// })
这里我们可以在浏览器的后台console看到显示的数据，现在我们想让打开的Vue页面的Welcome to Your Vue.js App换成我们传入的db.json的数据，我们就需要将test.js中axios异步请求获取的数据对象导出，让component下的HelloWorld.vue拿到导出对象即(response.data),所以整个异步请求对象的传递过程如下所示。
1.在test.js中导出异步请求对象
import request from "@/utils/request.js";
//request方法运行后会返回一个异步对象，通过调用getList()方法利用return将该异步对象传入HelloWorld.vue中，
export default {
getList() {
return request({ //这里的request就是axios.create方法所起的变量名
method: "get",
url: "/db.json"
/*由于在8888访问8001的项目会出现跨域问题，要解决该跨域问题需要在vue.config.js配置
代理来解决跨域问题。
*/
})
}
}
2.在HelloWorld.vue中通过import导入
我们通过fetchData()来使用test.js定义的getList方法，通过test变量调用getList获取db.json的值，即异步请求将respons.data的值赋予给list，在created函数中调用fetchData方法，然后将list绑定在h1上。
{{ list }}
3.在request.js中配置拦截器
// 在request.js中配置拦截器，拦截器作为前端页面和后端数据端口的中间部分，用于进行数据处理，如获取数据列表，进行数据操作。
// 设置请求拦截器
axios.interceptors.request.use(config=>{
return config
},error=>{
// 出错抛出异常
return Promise.reject(error);
})
// 设置响应拦截器
request.interceptors.response.use(response=>{
return response
},error=>{
return Promise.reject(error)
})
export default request;
3.解决跨域问题
本项目启动服务的端口在vue.config.js配置的是8888，当我们想要拿到http://localhost:8001的数据时，由于端口号的改变，项目就会遇到跨域问题，所以我们需要在vue.config.js开启代理，进行跨域配置。
module.exports = {
devServer:{
port:8888, //端口号设置为8888
host:"localhost", //主机采用本地服务
https:false, //不会启用http协议
open:true, //浏览器自动打开
proxy:{ //开发环境的代理，现在是启动8888端口的服务器，获取到的是8001端口的数据
// '/dev-api':{ //请求路径上带有标识就会代理
// target:"http://localhost:8001", //代理到那个服务器即目标服务器。
// changOrigin:true, //开启代理
// pathRewrite:{
// '^/dev-api':'', //将/dev-api移除
// }
// }
}
},
lintOnSave:false, //格式检查关闭
productionSourceMap:false, //map文件不会打包
}
同时我们需要在reuqest.js的axios.create修改路径
const request = axios.create({
// baseURL:"/dev-api", //这里不能有dev-api,否则会把dev-api拼接到localhost:888后，路径就会出错。
timeout:5000,
});
不同环境的请求的URL可能不同，所以我们可以设置一个常量值用来存放’‘/dev-api’
和"http://localhost:8001"
创建.env.development文件用来存放开发环境的变量。
VUE_APP_BASE_API = '/dev-api'
VUE_APP_SERVICE_URL = 'http://localhost:8001'
创建.env.production文件用来存放生产环境的变量。
VUE_APP_BASE_API = '/pro-api'
至此本章所有内容结束，最终页面如图所示。
request.js
import axios from 'axios';
//1....获取db.json数据的第一种方法，通过get获取数据
// axios.get("/db.json").then(response=>{
// console.log(response.data);
// })
//2.....获取db.json的第二种方法，通过调用axios方法获取数据
// axios({
// method:"get",
// url:"/db.json"
// }).then(response=>{
// console.log(response.data);
// })
// 3....获取db.json的第三种方法，通过自己封装一个axios来获取数据,其中request便是axios所起的变量名
const request = axios.create({
// baseURL:"http://localhost/8888",
// baseURL:"/dev-api", //这里不能有dev-api,否则会把dev-api拼接到localhost:888后，路径就会出错。
baseURL: process.env.VUE_APP_BASE_API,
// baseURL:"/",
timeout:5000,
});
// 该方法使用在test.js中,request.js只用于封装axios方法，路径的获取应独自存放，我们另建立test.js
// request({ //这里的request就是axios.create方法所起的变量名
// method:"get" ,
// url:"/db.json"
// }).then(response=>{
// console.log(response.data);
// })
// 在request.js中配置拦截器，拦截器作为前端页面和后端数据端口的中间部分，用于进行数据处理，如获取数据列表，进行数据操作。
// 设置请求拦截器
axios.interceptors.request.use(config=>{
return config
},error=>{
// 出错抛出异常
return Promise.reject(error);
})
// 设置响应拦截器
request.interceptors.response.use(response=>{
return response
},error=>{
return Promise.reject(error)
})
export default request;
test.js
import request from "@/utils/request.js";
// request({ //这里的request就是axios.create方法所起的变量名
// method:"get" ,
// url:"/db.json"
// }).then(response=>{
// console.log(response.data);
// })
//request方法运行后会返回一个异步对象，通过调用getList()方法利用return将该异步对象传入HelloWorld.vue中，
export default {
getList() {
return request({ //这里的request就是axios.create方法所起的变量名
method: "get",
// url: "/db.json"
url: "/db.json"
/*由于在8888访问8001的项目会出现跨域问题，要解决该跨域问题需要在vue.config.js配置
代理来解决跨域问题。
*/
})
}
}
main.js
import Vue from "vue";
import ElementUI from "element-ui";
// import 'element-ui/lib/theme-chalk/index.css'
import 'element-ui/lib/theme-chalk/index.css'
import App from "./App.vue";
import router from "./router";
Vue.use(ElementUI);
// Vue.config.productionTip = process.env.NODE_ENV === "production";
// console.log(process.env.VUE_APP_SERVICE_URL);
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
vue.config.js
module.exports = {
devServer:{
port:8888, //端口号设置为8888
host:"localhost", //主机采用本地服务
https:false, //不会启用http协议
open:true, //浏览器自动打开
proxy:{ //开发环境的代理，现在是启动8888端口的服务器，获取到的是8001端口的数据
// '/dev-api':{ //请求路径上带有标识就会代理
// target:"http://localhost:8001", //代理到那个服务器即目标服务器。
// changOrigin:true, //开启代理
// pathRewrite:{
// '^/dev-api':'', //将/dev-api移除
// }
// }
[process.env.VUE_APP_BASE_API]: {
target: process.env.VUE_APP_SERVICE_URL, // 在 .env.development 中配置的
changOrigin: true, //开启代理
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
}
},
lintOnSave:false, //格式检查关闭
productionSourceMap:false, //map文件不会打包
}
HelloWorld.vue
{{ list }}