Sugerencia: después de escribir el artículo, la tabla de contenido se puede generar automáticamente. Cómo generarla puede consultar el documento de ayuda a la derecha
Directorio de artículos
prefacio
En términos de realización de funciones, el sistema de gestión de estudiantes realiza principalmente el registro, el inicio de sesión y la transferencia de inicio de sesión a la página de inicio del sistema de gestión de estudiantes. La ruta de navegación de la izquierda realiza el salto de página y muestra la interfaz de gestión en el área principal de la derecha.
1. Creación del proyecto Vue
Este proyecto se desarrolla en base al marco Vue, por lo que Vue-CLI debe instalarse globalmente.
npm install -g @vue/[email protected]
Después de instalar Vue-CLI, verifique si Vue-CLI se instaló correctamente a través del comando.
vue -V //V大写
Si muestra que vue no es un comando interno, debe configurar las variables de entorno.
1. Crea un proyecto
Crear proyecto msm usando el comando
vue create msm
Seleccione el tercer elemento personalizado, configure el complemento, use el espacio para seleccionar, use las teclas arriba y abajo para cambiar de posición, haga clic en Intro después de completar la selección o presione Intro si no desea que aparezca. como muestra la imagen.
Después de crear el proyecto, ingrese el comando en la terminal en el directorio msm para verificar si el proyecto se creó correctamente. Cuando aparece la siguiente figura, la creación se ha realizado correctamente.
npm run serve
2. Inicializar el proyecto
1. Configurar el archivo de servicio del proyecto
Es necesario configurar el puerto del proyecto en el archivo vue.config.js, el nombre de host del nombre de dominio del servidor, si habilitar el protocolo, si abrirlo automáticamente en el navegador, verificación de formato y empaquetado de el archivo del mapa.
El código es el siguiente (ejemplo):
module.exports = {
devServer:{
port:8888, //端口号设置为8888
host:"localhost", //主机采用本地服务
https:false, //不会启用http协议
open:true, //浏览器自动打开
},
lintOnSave:false, //格式检查关闭
productionSourceMap:false, //map文件不会打包
}
2. Instale la biblioteca de componentes de terceros
Este proyecto necesita usar axios para recibir datos de back-end y realizar solicitudes asincrónicas, y usar pubsub para pasar valores para componentes que no son padre-hijo. Use ElementUI para completar la combinación de páginas frontales. Las instrucciones de instalación son las siguientes.
npm install -S axios pubsub-js element-ui
Dado que desea usar ElementUI para completar la página, debe usar import para importar el elemento en main.js en el directorio msm y usar el elemento a través de Vue.use (ElementUI). Instale el complemento de extensión Element UI Snippets en VScode para implementar sugerencias de sintaxis de elementos.
el código se muestra a continuación
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. Encapsule axios y resuelva problemas entre dominios
Utilice axios para completar la solicitud asincrónica del componente y la transferencia de datos de fondo. Necesitamos encapsular un axios para pasar solicitudes asincrónicas y configurar interceptores más tarde. Cree una carpeta utils en el directorio src en msm y cree un archivo request.js en la carpeta utils para almacenar los axios empaquetados.
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);
// })
El db.json pasado por el código anterior son los datos falsos que pasamos, y el archivo se almacena en la carpeta pública.
[
{"name": "小黑", "age": 18},
{"name": "小岳岳", "age": 28},
{"name": "林志玲", "age": 38}
]
Después de encapsular el método axios, debemos llamar a este método, request(), para realizar una solicitud asíncrona en test.js para obtener los datos en db.json.
import request from "@/utils/request.js";
// request({ //这里的request就是axios.create方法所起的变量名
// method:"get" ,
// url:"/db.json"
// }).then(response=>{
// console.log(response.data);
// })
Aquí podemos ver los datos que se muestran en la consola de fondo del navegador. Ahora queremos reemplazar Welcome to Your Vue.js App en la página abierta de Vue con los datos de db.json que pasamos. Necesitamos test.js The El objeto de datos obtenido por la solicitud asíncrona de axios se exporta y HelloWorld.vue debajo del componente obtiene el objeto exportado (response.data), por lo que el proceso de transferencia de todo el objeto de solicitud asíncrona es el siguiente.
1. Exporte el objeto de solicitud asincrónica en 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. Importar en HelloWorld.vue a través de import
Usamos fetchData() para usar el método getList definido por test.js, y llamamos a getList a través de la variable de prueba para obtener el valor de db.json, es decir, la solicitud asíncrona asigna el valor de answers.data a la lista, llame al método fetchData en la función creada y luego vincule la lista a h1.
<template>
<div class="hello">
<h1>{
{ list }}</h1>
</div>
</template>
<script>
// import request from '@/utils/request.js'
import test from '@/api/test.js'
export default {
name: "HelloWorld",
props: {
msg: String,
},
data(){
return{
list:[]
}
},
created(){
this.fetchData();
},
methods:{
fetchData(){
test.getList().then(response=>{
console.log("vue",response.data);
this.list = response.data;
})
}
},
};
</script>
3. Configure el interceptor en request.js
// Configure el interceptor en request.js, como la parte media de la página de inicio y el puerto de datos de back-end, el interceptor se utiliza para el procesamiento de datos, como la obtención de datos. lista y realizar operaciones de datos.
// Establecer el interceptor de solicitudes
axios.interceptors.request.use(config=>{ return config },error=>{ // Lanzar una excepción si ocurre un error return Promise.reject(error); })
// Establecer el interceptor de respuesta
request.interceptors.response.use(response=>{ return respuesta },error=>{ return Promise.reject(error) })
exportar solicitud predeterminada;
3. Resuelve problemas entre dominios
El puerto para iniciar el servicio de este proyecto está configurado como 8888 en vue.config.js, cuando queramos obtener los datos de http://localhost:8001, debido al cambio de número de puerto, el proyecto encontrará cross -problemas de dominio, por lo que debemos habilitar el proxy en vue.config.js para la configuración entre dominios.
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文件不会打包
}
Al mismo tiempo, necesitamos modificar la ruta en axios.create de reuqest.js
const request = axios.create({
// baseURL:"/dev-api", //这里不能有dev-api,否则会把dev-api拼接到localhost:888后，路径就会出错。
timeout:5000,
});
Las URL de las solicitudes en diferentes entornos pueden ser diferentes, por lo que podemos establecer un valor constante para almacenar ''/dev-api'
y "http://localhost:8001"
para crear un archivo .env.development para almacenar variables en el entorno de desarrollo.
VUE_APP_BASE_API = '/dev-api'
VUE_APP_SERVICE_URL = 'http://localhost:8001'
Cree un archivo .env.production para almacenar variables en el entorno de producción.
VUE_APP_BASE_API = '/pro-api'
Hasta ahora, todo el contenido de este capítulo ha terminado y la página final se muestra en la figura.
solicitud.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;
prueba.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配置
代理来解决跨域问题。
*/
})
}
}
principal.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");
ver.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文件不会打包
}
HolaMundo.vue
<template>
<div class="hello">
<h1>{
{ list }}</h1>
</div>
</template>
<script>
// import request from '@/utils/request.js'
import test from '@/api/test.js'
export default {
name: "HelloWorld",
props: {
msg: String,
},
data(){
return{
list:[]
}
},
created(){
this.fetchData();
},
methods:{
fetchData(){
test.getList().then(response=>{
console.log("vue",response.data);
this.list = response.data;
})
}
},
};
Resumir
Este capítulo configura e instala principalmente el entorno previo del proyecto Vue y la biblioteca de componentes de terceros, y explica brevemente cómo el proyecto obtiene datos a través de solicitudes asincrónicas y resuelve los problemas entre dominios del proyecto.