0. 前端 和 后端技术
前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts
后端技术栈：Node.js,Express,Jwt(模拟session),Mysql,Sequelize(操作数据库的框架)
1. 发起 axios 请求步骤
// 在 vue 项目 main.js 中配置 axios
npm install axios 或者 yarn add axios
// 导入 axios 并设置 默认地址
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
Vue.prototype.$http = axios
// 在 vue 项目单文件中 发送请求 例如： Login.vue
loginForm: {
username: 'admin',
password: '123456'
},
login() {
this.$refs.loginFormRef.validate( async valid => {
// 如果 返回的 false 直接返回 不执行后续操作
if(!valid) return; // this.loginForm 是参数
const {data: res} = await this.$http.post("/login", this.loginForm)
if(res.meta.status !== 200) return this.$message.error("登录失败")
this.$message.success("登录成功")
})
}
注意： 请求 返回的是 promise promise 可以使用 async await (await 必须在 async 的函数内)
<br />
2. 将 属性 挂载到 vue 原型上
// 在 vue 的 main.js 页面
Vue.prototype.$http = axios
// 后续 都可以在 .vue所有页面上使用 this.$http 就可以访问的到
this.$http.post("/login", { username: 'admin', password: '123456'})
<br />
3. 设置 sessionStorage 和 localStorage
// 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
// 1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
// 1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
window.sessionStorage.setItem("token", res.data.token)
// 2. 通过编程式导航跳转到后台主页，路由地址是 /home
this.$router.push('/home')
// 添加 sessionStorage
window.sessionStorage.setItem("token", res.data.token)
// 获取 sessionStorage 的数据
let data = sessionStorage.getItem('token');
// 添加 localStorage
window.localStorage.setItem("token", res.data.token)
// 获取 localStorage 的数据
let cat = localStorage.getItem('token');
sessionStorage 和 localStorage 的生命周期不一样 sessionStorage 关闭页面 数据就被清理了， localStorage 必须要手动删除 数据才会被清理掉
MDN 网址： https://developer.mozilla.org/zh-CN/ 在MDN里面搜索 sessionStorage 和 localStorage 查看详细教程
<br />
4. 访问权限 （只有登录了才能访问到）
// 挂载路由导航守卫 router.js 文件
router.beforeEach( (to, from, next) => {
// to 将要访问的路径
// from 代表从哪个路径跳转而来
// next 是一个函数，表示放行
// next() 放行 next('/login') 强制跳转
if(to.path === "/login") return next()
// 获取token
const tokenStr = window.sessionStorage.getItem('token')
if(!tokenStr) return next("/login")
next()
})
// 退出功能
logout() {
// 清空 token
window.sessionStorage.clear()
// 返回 登录页面
this.$router.push("/login")
}
<br />
5. 格式文档
// 在项目根目录添加 .prettierrc 文件 "semi":false, 表示; 改为, "singleQuote":true 表示 使用单引号
{
"semi":false,
"singleQuote":true
}
// 打开.eslintrc.js文件，禁用对 space-before-function-paren 的检查:
// 'space-before-function-paren' : 0 表示取消函数后空格检测 例如： login() {}
rules: {
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'space-before-function-paren' : 0
},
