Vue----express的基本操作，mongodb的基本语法，router路由守卫
1、使用nodejs编写静态服务器
const http = rquire('http');
const url = require('url');
const server = http.createServer((req, res) => {
if (req.url !== '/favicon.ico) {
// const params = url.parse(req.url, true).query
res.writeHead(200, {
'Content-Type': 'text/html;charset=utf-8'
})
res.write('hello world')
res.end()
}
})
server.listen(3000)
2、express的基本操作
npm / cnpm i express-generator -g
express myapp --view=ejs
cd myapp
cnpm / npm i
npm run start
cnpm / npm i supervisor -g
配置了dev指令
dev: supervisor ./bin/www
cnpm /npm run dev
ejs模板语法
<% %>
<%- %> / <%= %>
<% if () { %>
<% } %>
<% for() { %>
<% } %>
<%- include() %>
3、mongodb的基本语法（增删改查）
show dbs
use sh1904
db.getCollectionNames()
db.createCollection('users')
db.users.insert({} / [{},{}])
db.users.insertMany([{},{}])
db.users.insertOne({})
db.users.deleteOne({key:value})
db.users.deleteMany({key:value} / {})
db.users.updateOne({key:value}, { set: {}} / {inc: {key: 1}})
db.users.updateMany({key:value}, { set: {}} / {inc: {key: 1}})
db.users.find().pretty()
db.users.find({key:value}).pretty()
dbusers.find({ age: { $lte: 20, $gte: 15}}).pretty()
db.users.find({name: /吴/}).pretty()
db.users.find({}, {_id:0}).pretty()
db.users.find({},{}).sort({age: 1}).pretty()
db.users.find({},{}).limit(20).skip(0).pretty()
db.users.distinct('age')
node + mongoose + express
4、模块化开发
express项目中体现了模块化的概念 --- 遵循 Commonjs的规范
（AMD - require.js / CMD - sea.js）
module.exports = md ----- const md = require('./md.js')
export default md ---- import md from './md.js'
export const a = 1 ---- import { a } from './a.js'
5、前后端合作方式（前后端分离 -token/session）
后端渲染 --- 前后端不分离 --- ejs模板写后台管理系统
同构渲染 --- 服务端渲染 --- vue(nuxt.js)
前端渲染 --- 前后端分离的开发
跨域 -- 同源策略 -- jsonp / cors / 反向代理 ---- 接口文档 -- postman
判断用户是否登陆 cookie / webStorage / session
前端验证 ---- 本地存储
后端验证 ---- token + 本地储存
----- 基于socket的通讯方式 --- 聊天室
6、基于Socket.io实现聊天室的应用场景
socket.io --- 聊天 -- 画板
socket.on('eventname', function (str) {})
socket.emit('eventname, str)
即时通讯 --- 多人合作 ---- 音视频 --- 数据的可视化
7、MVC/MVP/MVVM的区别
mvc --- 不好划分
model view controller
mvp --- 被动
model view presenter
mvvm --- 主动
model view viewmodel
8、vue数据双向绑定的原理
数据劫持 --- Object.defineProperty()
发布订阅者模式
原理
1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。
angularjs的双向绑定： 依赖注入
9、Vue的基本属性
data / components / filters / directives / methods / mixins / watch / props / name
10、Vue的指令
v-for / v-if / v-else-if / v-else / v-show / v-model / v-html / v-text / v-bind / v-on / v-slot / v-once / v-cloak / v-pre /
11、Vue的生命周期钩子函数
brforeCreate / created / beforeMount / mounted / beforeUpdate / updated / beforeDestroy / destroyed / activated / deactivated / errorCaptured
12、vue项目的脚手架
@vue/cli --- webpack4
cnpm / npm i @vue/cli -g
vue create myapp / vue ui
可以安装 2的兼容插件
cnpm /npm i @vue/cli-init -g
vue init webapck myapp
vue-cli --- webpack3
cnpm / npm i vue-cli -g
vue init webpack myapp
文件名为单文件组件 ，后缀名为.vue --- 结构 + 行为 + 表现
13、vue的路由 vue-router
基本使用
<router-view></router-view>
命名视图 ---- 多视图路由
<routr-view></router-view>
<router-view name="footer"></router-view>
声明式跳转
<router-link to=""></router-link>
编程式跳转
this.router.push()this.router.push() this.router.push()this.router.replace()
this.router.back()thisrouter.back() thisrouter.back()thisrouter.go(-1)
动态传参 --- 命名路由
<router-link :to="{name: 'detail', params: {id:id}}"></router-link>
this.router.push(′/detail/′+id)this.router.push('/detail/' + id) this.router.push(′/detail/′+id)this.router.push({name: 'detail', params: {id:id}})
this.$router.push({path: '/detail' + id})
路由的模式 hash history
导航守卫
beforeEach
beforeEnter
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
过渡效果
<transition name="slide">
<router-view></router-view>
</transition>
.slide-enter .slide-enter-active .slide-enter-to
.slide-leave .slide-leave-active .slide-leave-to
路由的懒加载
（） => import()
离开页面返回还在原位置
14、vue中的内容分发-插槽
内容分发 -- slot --- 提高组件的复用性 --- 耦合度 ---- UI
15、vue中的组件间传值
父子组件的传值
子父组件的传值
非父子组件的传值 --- 兄弟组件间传值
状态管理器
16、vuex状态管理器的使用
单向数据流
state getters actions mutations
mapState mapGetters mapActions
this.store.dispatch(′′)this.store.dispatch('') this.store.dispatch(′′)this.store.commit('', data)
登陆状态 + 购物车状态
17、使用git多人协作步骤
git init
git status
git add .
git commit -m ''
git push origin master
git remote origin ********
git config ----- name / email
ssh
git checkout -b **dev
git checkout -b **bug
git checkout master
git merge **dev
git pull origin **dev
git clone ***
18、服务器相关
项目上线
nginx 服务器 ---- 修改nginx的配置
搭建自己的服务器 --- node --- mongodb --- 静态文件目录public ---- nginx反向代理去掉端口号
