vueJS + Express

创建Server Folder. 然后分屏左边启动Client 右边进入Server

npm init -f 可以创建一个Package.json 在Server Folder里

install nodemon

往Script 里添加 start 和 lint. 这样npm run start/ npm run lint 就是启动这个

在Server里src创建app.js

Npm install body-parser, express, cors, Morgan

此时的Server/app.js 大概

现在转入Vue.js 部分

创建一个Services Folder  创建api.js  和 authentication.js

Router部分定义在index.js  这里我们设置一个route to register.

在component Folder里 创建register component.

这里就是纯vue语法了， 比较重要的有v-model, which is a two direction bindings.

@click = "function name"

--------------------------------------------------------------

实现的几个牛逼功能：

1. 登录

这里用到了一个two way bindings. 用户输入的value会进入component里的变量里，然后我们用this.email, this.password来登录

调用Store的方式 this.$store....

这里最核心的就是调用AuthenticationService以及setToken,setUser 和router 切换。Login成功跳转到name位'songs'的component

vuex 跟react-redux很像, 一个central store:

定义Store的property

state里面表示Store里存放的property

在Server端：

先在Routes里定义：

定义AuthenticationController.js

我们可以从req.body里提取出用户传入的data。

2. 搜索

使用lodash里的debounce方法，使搜索时候不会每个字都去搜索，而是等用户打完字几秒后开始。

***route.query 设置为this.search也就是用户输入的值。search也是two way binding

3. Bookmarks

首先在model 里：

在bookmarks Controller里， 这里userId是从req.user.id里取出来的原因是我们使用了middleware 往request里添加了一个新的field

req.user = USER

在Policy Folder的IsAuthenticate.js里

Client side:

Script里面的逻辑其实很简单，就是copy paste一个data-table和pagination.

重点在于： page一呈现出来的时候立马使用mounted 然后取出bookmarks data。 然后data会被以Table的方式呈现。

触发Favorite的问题

4. 历史记录

历史记录基本跟Bookmarks是一样的原理

要注意的是，我们在详细浏览一个music的时候，要在mounted() 里post一个记录到SongHistoryService. 为什么只传入songId?因为 User info记录在persistent的cache里了？

5. Youtube

vue-youtube-embe

其实很简单，只需要在数据库里存放Youtube链接的link就好了。

:video-id 那里放置 outer component传入的props: Youtube-id

6. Passport Authenticate

Key is the token!!! 我们把这个token存放在store里。【突然意识到这样会不会影响到高并发？还是说因为VueJs是前端所以每个人的浏览器里有一个unique的Store？】

Model里的user.js

这个可以算做一个User Schema，专门用来造user。

在AuthenticationController 里定义：

这里主要是给新建的user sign 一个token。

看，这里的user可以调用comparePassword的方法。

res.send(..) 是从server side send back to client side.

这里client side把response里的Token存入Store里。

passport.js

JWT (JSON Web Token)

划重点：

vuetify Icon

middleware injection

axios

export, require

Async await

Store

watch

Lodash

mounted

computed  我们需要知道他和Methods的区别。。。

效果其实差不多，但是主要是Performance原因

...mapState(){}

Methods需要被Explicitly 调用才可以，

比如

Computed会自动update DOM的值 whenever sth changed.

Example: https://codepen.io/Kradek/pen/gROQeB?editors=1010

在Vue.js里import

位置是在vue file里的script区域：

import '../../../node_modules/vue-material-design-icons/styles.css'

SQL数据库NodeJs的创建：