[JavaScript知识库]vue node mongodb nginx project 笔记

node -v
npm -v
npx -v

安装 VueCli
npm i @vue/cli -g

vue create book-mgr-fe

Manually

• Choose vue version
• Babel
• Router
• Vuex
• Css Pre
• Linter / For

3
history n
Sass dart-sass
ESLint Airbnb
Lint and fix on commit
In dedicated config files

<input v-model=“inputVal” @keyup.enter=“add” />

class=“done”
:class=“item.done ? ‘done’ : ‘’”
:class="{
done: item.done,
}"
@click
@contextmenu=“remove(index, $event)”

cd C:\Program Files\MongoDB\Server\4.4\bin>
./mongod --dbpath C:\Users\朱洪苇\Desktop\266\db
=> 进程被挂起，数据库启动成功
数据库就会被自动初始化
C:\Users\朱洪苇\Desktop\266\db 下会产生一些文件

初始化服务端代码
npm init (npm init -y 默认y)
package name
version
des
entry point
test command
git repository
keywords
author
license

is this ok?

npm i koa

// npm i jquery
cd be/src/
node index.js

npm i mongoose

git

git --version
git clone
git init
git remote add origin
git add .
git commit -m 
git push origin master

cd book-mgr-fe
npm i --save ant-design-vue@next

main.js
import Antd from ‘ant-design-vue’
import ‘ant-design-vue/dist/antd.css’

createApp(App)
.use(Antd)

npm install --save @ant-design/icons-vue

cd book-mgr-be
npm i @koa/router

npm i  nodemon -D

"dependencies": {
    "@koa/cors": "^3.1.0",
    "@koa/router": "^10.0.0",
    "jsonwebtoken": "^8.5.1",
    "koa": "^2.13.1",
    "koa-body": "^4.2.0",
    "mongoose": "^5.12.9"
  },
  "devDependencies": {
    "nodemon": "^2.0.7"
  }
  
nodemon index.js

  "scripts": {
    "dev": "nodemon src/index.js",
  },

npm koa-body -S

cd book-mgr-fe
npm i axios -S

解决跨域问题
cd book-mgr-be
npm i @koa/cors

jwt
jsonwebtoken
cd book-mgr-be
npm i jsonwebtoken

邀请码 (uuid)
cd book-mgr-be
npm i uuid

ant design处理时间库 Moment
cd book-mgr-fe
npm i moment

‘1’.padStart(2, ‘0’)
‘1’.padEnd(2, ‘0’)

cd book-mgr-be/init
node db.js

npm i koa-jwt

补充

• const { path } = ctx === const path = ctx.path
• const { path:p = ‘a.com’ } = ctx
• require & module.exports ~ common.js

// 回调地狱 promise async await
const request = (arg, cb) => {
	setTimeout(() => {
		console.log(arg)
		cb(arg + 1)
	}, 1000)
}

request(1, function(res1) {
	request(res1, function(res2) {
		request(res2, function(res3) {
			request(res3, function(res4) {
				request(res4, function(res5) {
					console.log('res5', res5)
				})
			})
		})
	})
})



const request = (arg) => {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			console.log(arg)
			resolve(arg + 1)
		}, 1000)
	})
}

request(1)
	.then((res1) => {
		return request(res1)
	})
	.then((res2) => {
		return request(res2)
	})
	.then((res3) => {
		return request(res3)
	})
	.then((res4) => {
		return request(res4)
	})
	.then((res5) => {
		console.log('res5', res5)
	})
	
// 像写同步代码一样去写异步的逻辑
const fun = async () => {
	const res1 = await request(1)
	const res2 = await request(res1)
	const res3 = await request(res2)
	const res4 = await request(res3)
	const res5 = await request(res4)
	
	console.log('res5', res5)
}

// async 函数，返回的是一个 Promise
const fn1 = async () => {
	return 1;
}

const fn2 = () => {
	return new Promise((resolve, reject) => {
		reslove(1)
	})
}

fn1 === fn2