
创建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的创建:
网友评论