整体目录介绍
- build 文件夹，用来存放项目构建脚本
- config 中存放项目的一些基本配置信息，最常用的就是端口转发
- node_modules 这个目录存放的是项目的所有依赖，即 npm install 命令下载下来的文件
- src 这个目录下存放项目的源码，即开发者写的代码放在这里
- static 用来存放静态资源
- index.html 则是项目的首页，入口页，也是整个项目唯一的HTML页面
- package.json 中定义了项目的所有依赖，包括开发时依赖和发布时依赖
SRC目录介绍
- assets 目录用来存放资产文件
- components 目录用来存放组件（一些可复用，非独立的页面），当然开发者也可以在 components 中直接创建完整页面。
- 推荐在 components 中存放组件，另外单独新建一个 page 文件夹，专门用来放完整页面。
- router 目录中，存放了路由的js文件
- App.vue 是一个Vue组件，也是项目的第一个Vue组件
- main.js相当于Java中的main方法，是整个项目的入口js
main.js
import Vue from 'vue'
import App from './App'
import router from './router'//默认导入index.js
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import {postKeyValueRequest} from "./utils/api";
import {postRequest} from "./utils/api";
import {putRequest} from "./utils/api";
import {getRequest} from "./utils/api";
import {deleteRequest} from "./utils/api";
import {uploadFileRequest} from "./utils/api";
import {initMenu} from "./utils/utils";
Vue.use(ElementUI,{ size: 'nimi'});
Vue.prototype.postRequest = postRequest;
Vue.prototype.postKeyValueRequest = postKeyValueRequest;
Vue.prototype.getRequest = getRequest;
Vue.prototype.putRequest = putRequest;
Vue.prototype.deleteRequest = deleteRequest;
Vue.prototype.uploadFileRequest = uploadFileRequest;
//const router = new VueRouter({ ... })
Vue.config.productionTip = false
router.beforeEach((to, from, next) => {
// ...
// 如果不是登录页面并且没有登录
if (to.path!="/" && !window.sessionStorage.getItem("user")) {
next("/");
return;
}
initMenu(router,store)
next();
})
/* eslint-disable no-new */
new Vue({
el: '#app',//指的是html中的div
router,
store,
components: { App },
template: '<App/>'
})- 在main.js 中，首先导入 Vue 对象——————src引入和import的区别：引入造成全局变量泛滥
- 导入 App.vue ，并且命名为 App
- 导入router，注意，由于router目录下路由默认文件名为 index.js ，因此可以省略
- 所有东西都导入成功后，创建一个Vue对象，设置要被Vue处理的节点是 ‘#app’，’#app’ 指提前在index.html 文件中定义的一个div
- 将 router 设置到 vue 对象中，这里是一个简化的写法，完整的写法是 router:router，如果 key/value 一模一样，则可以简写。
- 声明一个组件 App，App 这个组件在一开始已经导入到项目中了，但是直接导入的组件无法直接使用，必须要声明————在vue对象中使用components声明。
- template 中定义了页面模板，即将 App 组件中的内容渲染到 ‘#app’ 这个div 中。
- template中的app和和component中的app对应
App.vue——————页面效果定义在此处
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>- App.vue 是一个vue组件，这个组件中包含三部分内容：1.页面模板（template）；2.页面脚本（script）；3.页面样式（style）
- 页面模板中，定义了页面的 HTML 元素，这里定义了两个，一个是一张图片，另一个则是一个 router-view
- 页面脚本主要用来实现当前页面数据初始化、事件处理等等操作
- 页面样式就是针对 template 中 HTML 元素的页面美化操作
- 需要额外解释的是，router-view，这个指展示路由页面的位置，可以简单理解为一个占位符，这个占位符展示的内容将根据当前具体的 URL 地址来定。具体展示的内容，要参考路由表，即 router/index.js 文件，该文件如下：router
router
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})- 这个文件中，首先导入了Vue对象、Router对象以及 HelloWorld 组件——————需要首先导入组件才能由路由实现占位符转转化
- 创建一个Router对象，并定义路由表
- 这里定义的路由表，path为 / ，对应的组件为 HelloWorld，即浏览器地址为 / 时，在router-view位置显示 HelloWorld 组件——————根据url地址替换router-view
EL组件
安装并在main.js中引入
npm i element-ui -S
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});请求封装
安装axios
npm install axios封装
import axios from 'axios'
import {Message} from 'element-ui'
axios.interceptors.request.use(config => {
return config;
}, err => {
Message.error({message: '请求超时!'});
// return Promise.resolve(err);
})
axios.interceptors.response.use(data => {//{data:{status:200,msg"",obj:{}},status:200}
if (data.status && data.status == 200 && data.data.status == 500) {
//业务逻辑错误
Message.error({message: data.data.msg});
return;
}
if (data.data.msg) {
Message.success({message: data.data.msg});
}
return data.data;
}, err => {
if (err.response.status == 504 || err.response.status == 404) {
Message.error({message: '服务器被吃了⊙﹏⊙∥'});
} else if (err.response.status == 403) {
Message.error({message: '权限不足,请联系管理员!'});
} else if (err.response.status == 401) {
Message.error({message: err.response.data.msg});
} else {
if (err.response.data.msg) {
Message.error({message: err.response.data.msg});
}else{
Message.error({message: '未知错误!'});
}
}
// return Promise.resolve(err);
})
let base = '';
export const postKeyValueRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}
export const postRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
headers: {
'Content-Type': 'application/json'
}
});
}
export const uploadFileRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
headers: {
'Content-Type': 'multipart/form-data'
}
});
}
export const putRequest = (url, params) => {
return axios({
method: 'put',
url: `${base}${url}`,
data: params,
headers: {
'Content-Type': 'application/json'
}
});
}
export const deleteRequest = (url) => {
return axios({
method: 'delete',
url: `${base}${url}`
});
}
export const getRequest = (url) => {
return axios({
method: 'get',
url: `${base}${url}`
});
}后端返回数据
methods:{
doLogin(){
// alert(JSON.stringify(this.user));
this.postKeyValueRequest("/dologin", this.user).then(msg => {
if (msg) {
// alert(JSON.stringify(msg));
1第二个参数必须为字符串
//保存localstorage，sessionstorage 2.在其他页面也能获取数值，浏览器关闭后不可以
window.sessionStorage.setItem("user", JSON.stringify(msg.object));
this.$router.replace("/home");
}
});
}
}前端页面跳转
methods:{
doLogin(){
// alert(JSON.stringify(this.user));
this.postKeyValueRequest("/dologin", this.user).then(msg => {
if (msg) {
// alert(JSON.stringify(msg));
window.sessionStorage.setItem("user", JSON.stringify(msg.object));
//replace不可回退
// push跳转后可以回退
this.$router.replace("/home");
}
});
}路由导航守卫
router.beforeEach((to, from, next) => {
// ...
// 如果不是登录页面并且没有登录
if (to.path!="/" && !window.sessionStorage.getItem("user")) {
next("/");
return;
}
initMenu(router,store)
next();
})
扫一扫
5719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
