github.com/yier1995070…
一、router.go ;router.push和 router.replace的区别
1. router.go(n)
这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，类似window.history.go(n)
2. router.push(location)
想要导航到不同的URL，则使用router.push方法，这个方法会向history栈添加一个新的记录，所以，当用户点击后退按钮时，则回到之前的URL。
3. router.replace(location)
跟router.push很像，唯一的不同就是，它不会向history添加新记录，而是跟它的方法名一样--替换掉当前的history记录。
二、vue router常见问题总结
1. router和route的区别
rourer.push方法
$route为当前router跳转对象里面获取name、path、query、params等
2. params和query的区别
*用法上
query要用path来引入，params要用name来引入，接收参数都是类似的
分别是this.route.params.name
this.$router.push({ path:'/detail', query:{ code:10011 }})
this.$router.push({ name:'detail', params:{ code:10011 }})
*展示上
query更加类似于我们ajax中get传参，params类似于post。说的简单一点，前者在浏览器地址栏中显示参数，后者则不显示
3. router.replace()
*跳转登录页
*携带当前页面路由，以在登录完成登录后返回当前页面
router.replace({ path:"/login", query:{ redirect:router.currentRoute.fullPath }})
三、H5 localstorage本地存储数据的封装以及在vue中的使用
通过本地存储（Local Storage），web应用能够在用户浏览器中对数据进行本地的存储
1. 存储
localStorage.setItem('lastname','Gates');
2. 取本地存储数据
localStorage.getItem('lastname')
3. 删除"lastname"
localStorage.removeItem('lastname')
// H5 localstorage本地存储数据的封装以及在vue中的使用
var storage={
// 存储
set(key,value){
localStorage.setItem(key,JSON.stringify(value));
},
// 取出数据
get(key){
return JSON.parse(localStorage.getItem(key));
},
// 删除数据
remove(key){
localStorage.removeItem(key);
}}
// 暴露给外部访问
export default storage
// ********然后某个页面需要本地存储，就需要用import引入：import storage from './storage.js'
import storage from './storage.js'
// 使用
storage.set('list',this.list)
四、Vue推荐VSCode开发必备的插件
Vetur —— 语法高亮、智能感知、Emmet等
包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）
EsLint —— 语法纠错
view in browser —— 如何用浏览器预览运行html文件
Debugger for Chrome —— 映射vscode上的断点到chrome上，方便调试（配置有点麻烦，其实我没用这个）
Auto Close Tag —— 自动闭合HTML/XML标签
Auto Rename Tag —— 自动完成另一侧标签的同步修改
JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间
Path Intellisense —— 自动路劲补全
HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式
React-native 快捷键显示-----react组件模板；例如：cccs
vue vscode snippets 快捷键显示------vue组件模板；例如：vba
vscode设置自动新建文件头注释及函数注释
1.在vscode extensions中搜索并按照koroFileHeader 插件
类注释： window：ctrl+alt+i；mac：ctrl+cmd+i
方法注释：window：ctrl+alt+t；mac：ctrl+cmd+t
五、使用vant开发饿了么笔记
1. 下载脚手架
npm run serve（一般用这个）
2. 安装vant、在package中配置、引入vant组件库（按需加载）
安装
# 通过 npm 安装
npm i vant -S
# 通过 yarn 安装
yarn add vant
按需加载
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
# 安装插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
引入vant，然后使用
在main.js中引入
import { Row, Col } from 'vant';import { Image } from 'vant';import { Field } from 'vant';import { NavBar } from 'vant';import { Button } from 'vant';
Vue.use(Button);Vue.use(NavBar);Vue.use(Field);Vue.use(Image);Vue.use(Row).use(Col);
3、在手机上预览开发的网页的方法
1 、首先在项目的config目录下的index.js中修改host的ip地址修改成自己电脑的ip地址
查询ip地址：（1）打开cmd （2）输入ipconfig
2、需要重新启动项目 npm run serve ,然后在浏览器打开，在手机打开（注意：电脑和手机的WiFi需要连同个局域网）
4. tabBar的实现（使用路由router-view）
1、在App.vue文件中写如下代码
<template> <div id="app"> <router-view /> <van-tabbar v-model="active" class="active_tab" safe-area-inset-bottom> <van-tabbar-item v-for="(item, index) in tabBarList" :key="index" @click="tab(index,item.name)" > <span :class="currIndex == index ? active : ''">{{ item.title }}</span> <template slot="icon" slot-scope="props"> <img :src="props.active ? item.select : item.noSelct" /> </template> </van-tabbar-item> </van-tabbar> </div></template>
<script>import Vue from "vue";import { Tabbar, TabbarItem } from "vant";Vue.use(Tabbar).use(TabbarItem);
export default { data() { return { currIndex:0, active:0, tabBarList: [ { name:'home', path: "/home", select: require("./assets/img/home-select.png"), noSelct: require("./assets/img/home-no-select.png"), title: "外卖" }, { name:'life', path: "/life", select: require("./assets/img/home-select.png"), noSelct: require("./assets/img/home-no-select.png"), title: "生活" }, { name:'order', path: "/order", select: require("./assets/img/home-select.png"), noSelct: require("./assets/img/home-no-select.png"), title: "订单" }, { name:'myseft', path: "/myself", select: require("./assets/img/home-select.png"), noSelct:require( "./assets/img/home-no-select.png"), title: "我的" } ] }; }, methods:{ tab(index,val){//点击跳转到相应的路由 this.currIndex=index; this.$router.push(val) } }};</script>
<style>#app { color: #2c3e50;}.active_tab img {//图片的大小 width: 26px; height: 26px;}
.van-tabbar-item--active {//选中字体的颜色 color: #3190e8;}</style>
2、router目录下的index.js中引入路由，注册路由
import Vue from 'vue'import Router from 'vue-router'import Home from '@/components/home'import Life from '@/components/Life'import Order from '@/components/order'import Myseft from '@/components/myself'
Vue.use(Router)
export default new Router({ routes: [ { path:'/',redirect:'/home'}, { path: '/home', name: 'Home', component: Home }, { path: '/life', name: 'Life', component: Life }, { path: '/order', name: 'Order', component: Order }, { path: '/myseft', name: 'Myseft', component: Myseft }, ]})
六、使用node.js开发后台
1. 安装express、body-parser cookie-parser
新建server目录，在此目录下新建model.js、server.js和user.js
npm install express -S;
npm install body-parser -S;
npm install cookie-parser -S;
npm install mongoose -S;
2、在package.json中配置
为了告诉开发环境的服务器去代理任何开发环境中未知的请求到我们自己的api服务器，添加一个proxy到packge.json的字段
"proxy": "http://localhost:8888"
在server.js的代码
const express=require('express');const bodyParser=require('body-parser');const cookieParser=require('cookie-parser')const app=express();const Router=express.Router();//设置允许跨域访问该服务.app.all('*', function (req, res, next) { res.header('Access-Control-Allow-Origin', '*'); //Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行 res.header('Access-Control-Allow-Headers', 'Content-Type'); res.header('Access-Control-Allow-Methods', '*'); res.header('Content-Type', 'application/json;charset=utf-8'); next(); });
app.use(bodyParser())app.use(cookieParser())app.use('/user',require('./user'));
app.listen(8080)
在user.js的代码
const express=require('express');const Router=express.Router();
const model=require('./model');//拿表const Business=model.getModel('business');//拿到user表，使用getModel方法
Router.get('/list',(req,res)=>{ res.json({businessName:'华为公司',address:'地址',id:1,shopdesc:'比较出名的公司'})})
module.exports=Router;
在model.js中见表
const mongoose=require('mongoose');const DB_URL='mongodb://127.0.0.1:27017/boss';mongoose.connect(DB_URL)
const models={ business:{ 'businessName':{type:String,require:true}, 'address':{type:String,require:true}, 'id':{type:String,require:true}, 'shopdesc':{type:String,require:true} }}
for(let m in models){ mongoose.model(m,new mongoose.Schema(models[m]))}
module.exports={ getModel:function(name){ return mongoose.model(name) }}
服务器就开启成功，接口就有了/lsit
七、vue的script结构
<script>export default { name: "Home", data() { return {
}; }, methods:{ // 组件的方法 }, watch:{ // watch擅长处理的场景，一个数据影响多个数据 }, computed:{ // computed擅长处理的场景，一个数据受多个数据影响 }, beforeCreate:function(){ // 在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前被调用。 }, created:function(){ // 实例已经创建完成之后被调用，在这一步，实例已完成一下配置： // 数据观测（data-observer）、属性和方法的运算，watch/event事件回调。 // 然而，挂载阶段还没开始，$el属性目前不可见 }, beforeMount:function(){ // 在挂载之前被调用，相关的render函数首次被调用 }, mounted:function(){ // 编译好的HTML挂载到页面完成之后执行的事件钩子 // el破译创建的vm.$el替换，并挂载到实例上去之后调用改钩子 }, updated: function() { // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 // 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。 // 该钩子在服务器端渲染期间不被调用。 }, beforeDestroy: function() { // 实例销毁之前调用。在这一步，实例仍然完全可用。 }, destroyed: function() { // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。 }}</script>
八、vue中引入css
1. 方法一：
<script>
import '../static/css/global.css' /*引入公共样式*/
...
</script>
2. 方法二：
<style scoped >
@import './../static/css/global.css'; /*引入公共样式*/
...
</style>
3. 方法三：
<style scoped src="../static/css/user.css">
八、axios的封装和api的管理以及请求接口
1. 安装axios，引入axios
npm install axios -S;//安装命令
import axios from 'axios';//引入
2、axios请求拦截、响应拦截、错误统一处理
在src目录下新建service目录，在service目录下新建http.js写入如下代码
/** * axios封装 * 请求拦截、响应拦截、错误统一处理 */import axios from 'axios';import router from '../router';//导入路由// import store from '../store/index';import {Toast} from 'vant'
/** * 提示函数，禁止点击蒙层，显示一秒后关闭 * @param {} msg */const tip=msg=>{ Toast({ message:msg, duration:1000, forbidClick:true })}
/** * 跳转登录页 * 携带当前页面路由，已期在登录成功后返回当前页面 */
const toLogin=()=>{ router.replace({ path:'/login', query:{ redirect:router.currentRoute.fullPath } }) }
/** * 请求失败后的错误统一处理 * @param {Number} status 请求失败的状态码 */const errorHandle=(status,other)=>{ // 状态吗判断 switch(status){ // 401:未登录状态，跳转登录页 case 401: toLogin(); break; // 403 token过期 // 清除token并跳转登录页 case 403: tip('登录过期，请重新登录') localStorage.removeItem('token'); store.commit('loginSuccess',null); setTimeout(()=>{ toLogin(); },1000) break; // 404请求不存在 case 404: tip('请求的资源不存在'); break; default: console.log(other); }}
/** * 创建axios实例 */var instance=axios.create({timeout:1000*12});// 设置post请求头instance.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';
/** * 请求拦截器 * 每次请求前，如果存在token则在请求头中携带token */instance.interceptors.request.use(config=>{ return config;},error=>{ Promise.reject(error)})
/** * 响应拦截器 */instance.interceptors.response.use( // 请求成功 res=>res.status===200?Promise.resolve(res):Promise.reject(res), // 请求失败 error=>{ const {response}=error; if(response){ // 请求已发出，但是不在2xx的范围 errorHandle(response.status,response.data.message); return Promise.reject(response); }else{ // 处理断网的情况 // eg：请求超时或断网时，更新state的network状态 // network状态在app。vue中控制一个全局的断网提示组件的显示隐藏 // 关于断网组件中的刷新重新获取数据，会在断网组件说明 if(!window.navigator.onLine){ store.commit('changeNetwork',false); }else{ return Promise.reject(error) } } })export default instance;
3、域名、接口api管理、get和post方法封装
在src目录下的service目录下新建api.js
import instance from './http.js'import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到
/** * 域名 */const base={ ceshi:'http://localhost:端口'}/**
8080 * 接口api管理 */export const apiLink={ login:{url:'/user/login',text:'登录接口'}, getList:{url:'/user/list',text:'列表数据'}}
/** * get方法，对应get请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] * */export function get(Objurl,params){ return new Promise((resolve,reject)=>{ instance.get(base.ceshi+Objurl.url,{ params:params }).then(res=>{ resolve(res.data) }).catch(err=>{ reject(err.data) }) })}
/** * post方法，对应post请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] * */export function post(Objurl,params){ return new Promise((resolve,reject)=>{ instance.post(baes.ceshi+Objurl.url,QS.stringify(params)) .then(res=>{ resolve(res.data) }) .catch(err=>{ reject(err.data) }) })}
4、请求接口
<script>import {get,post,apiLink} from '../service/api.js'export default { name: "Home", data() { return {
}; }, methods:{ // 组件的方法 getList(){ get(apiLink.getList).then(res=>{ console.log(res) }) } }, watch:{ // watch擅长处理的场景，一个数据影响多个数据 }, computed:{ // computed擅长处理的场景，一个数据受多个数据影响 }, created:function(){ this.getList() }
}</script>
4、请求接口
cnpm：无法加载文件C：/Users/Administrator/AppData/Roaming/npm/cnpm.ps1,因为在此系统上禁止运行脚本
解决方式：
1 在系统中搜索框输入Windos PowerShell
2 点击“管理员身份运行”
3 输入“set-ExecutionPolicy RemoteSigned”回车
4 根据提示，输入A，回车
5 再次回到cnpm -v 执行成功
九.vuex
(1)
