Vue 编码基础
2.1.1. 组件规范
2.1.2. 模板中使用简单的表达式
2.1.3 指令都使用缩写形式
2.1.4 标签顺序保持一致
2.1.5 必须为 v-for 设置键值 key
2.1.6 v-show 与 v-if 选择
2.1.7 script 标签内部结构顺序
2.1.8 Vue Router 规范
Vue 项目目录规范
2.2.1 基础
2.2.2 使用 Vue-cli 脚手架
2.2.3 目录说明
2.2.4注释说明
2.2.5 其他
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
target:‘http://localhost:8088’,//访问的服务器地址
changeOrigin:true,//true为开启代理
//secure: true, // 如果是https接口，需要配置这个参数
pathRewrite:{
‘^/api’: ‘’//路径的替换规则
/*
*这里的配置是正则表达式，以/api开头的路径将会被‘/'替换掉
*假如后台文档的接口是 “https://www.cyclv.com/admin/login”
*前端调取API接口应写：axios.get(‘/api/admin/login’)
*/
}
}
}
}
}
在api.js下简单封装了与后端交互的代码，主要考虑到如果以后交互技术的变化以方便拓展。
import axios from ‘axios’
export const postRequest = (url,data) => {
return axios.post(url,data);
}
export const getRequest = (url)=> {
return axios.get(url);
}
export const deleteRequest = (url)=> {
return axios.delete(url);
}
export const putRequest = (url,data)=> {
return axios.put(url,data);
}
具体代码片段，如：
const api = ‘api/login’;
postRequest(api, {
aid: this.loginForm.aid,
pwd: this.loginForm.pwd
})
.then(response => {
if (response.status == 201) {
// 在 store 的 state存储 状态
this.$store.commit(‘login’, this.loginForm);
this.$router.replace({path: ‘/home’});
} else {
alert(“密码错误！”);
}
})
.catch(res => {
this.console.log(“内部错误”);
})
//import …………
Vue.use(VueRouter)
const routes = [
{
path:‘/login’,
name:‘Login’,
component:Login
},
{
path: ‘/home’,
name:‘Home’,
component: Home,
meta:{
// 表明页面需要进行拦截
requiredAuth: true
},
children :[
{
path: ‘display-students’,
name: ‘DisplayStudent’,
component:DisplayStudent
},
{
path: ‘add-students’,
name: ‘AddStudents’,
component: AddStudents
},
{
path: ‘display-courses’,
name: ‘DisplayCourses’,
component: DisplayCourses
},
{
path: ‘add-courses’,
name: ‘AddCourses’,
component: AddCourses
},
{
path: ‘add-achievement’,
name: ‘AddAchievement’,
component: AddAchievement
},
{
path: ‘display-achievement’,
name: ‘DisplayAchievement’,
component: DisplayAchievement
},
{
path: ‘add-score’,
name: ‘AddScore’,
component: AddScore
},
{
path: ‘display-score’,
name: ‘DisplayScore’,
component: DisplayScore
}
]
},
{
path: ‘*’,
redirect:‘/login’
}
]
const router = new VueRouter({
routes
})
export default router
这里只是简单的使用store技术，用于存储一些全局的状态。
这里存储了用户的登录状态。
import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex)
/*
sessionStorage 只有关闭页面、退出浏览器才会清除
localStorage 除非只有主动清除，否则不会清除
*/
export default new Vuex.Store({
state: {
administrator:{
aid: window.sessionStorage.getItem(‘admin’ || ‘[]’)==null ? null: JSON.parse(window.sessionStorage.getItem(‘admin’ || ‘[]’)).aid
}
},
mutations: {
login(state,admin){
state.administrator = admin;
// console.log(‘到这’,admin);
window.sessionStorage.setItem(‘admin’,JSON.stringify(admin));
}
},
actions: {
},
modules: {
}
})
这里简单实现了登录拦截器的功能。
在main.js文件里：
router.beforeEach((to,from,next) => {
if(to.meta.requiredAuth){
if(store.state.administrator.aid){
next();
}else{
// 在登录成功后自动路由到目标位置
next({
path:‘login’,
query:{redirect:to.fullPath}
})
}
}else{
总结
- 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）
-
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
-
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～
祝大家都有美好的未来，拿下满意的 offer。
1711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
