├── backend
    ├── README.md
    ├── settings.js
    ├── my-database.db
    ├── package.json
    ├── accountRouter.js
    ├── app.js
    ├── tweetRouter.js
    └── db.js
├── front
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── babel.config.js
    ├── src
    │   ├── assets
    │   │   ├── CRUD.png
    │   │   ├── logo.png
    │   │   ├── background.png
    │   │   ├── registerImg.png
    │   │   └── assets.css
    │   ├── App.vue
    │   ├── store
    │   │   └── index.js
    │   ├── main.js
    │   ├── router
    │   │   └── index.js
    │   ├── views
    │   │   ├── Home.vue
    │   │   ├── Register.vue
    │   │   └── Skill.vue
    │   └── client.js
    ├── README.md
    └── package.json
├── README.md
└── .gitignore


/backend/README.md:
--------------------------------------------------------------------------------
1 | 所需安装包
2 | express
3 | md5-node
4 | jsonwebtoken
5 | sqlite3
6 | body-parser
7 | 
8 | 


--------------------------------------------------------------------------------
/backend/settings.js:
--------------------------------------------------------------------------------
1 | //令牌加密规则，随便写
2 | module.exports = {
3 | 	accessTokenSecret: "qeocsajchsacsavd"
4 | }


--------------------------------------------------------------------------------
/backend/my-database.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaoxian521/vue-node-sqlite3/HEAD/backend/my-database.db


--------------------------------------------------------------------------------
/front/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaoxian521/vue-node-sqlite3/HEAD/front/public/favicon.ico


--------------------------------------------------------------------------------
/front/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/front/src/assets/CRUD.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaoxian521/vue-node-sqlite3/HEAD/front/src/assets/CRUD.png


--------------------------------------------------------------------------------
/front/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaoxian521/vue-node-sqlite3/HEAD/front/src/assets/logo.png


--------------------------------------------------------------------------------
/front/src/assets/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaoxian521/vue-node-sqlite3/HEAD/front/src/assets/background.png


--------------------------------------------------------------------------------
/front/src/assets/registerImg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaoxian521/vue-node-sqlite3/HEAD/front/src/assets/registerImg.png


--------------------------------------------------------------------------------
/front/src/assets/assets.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 |     width: 100%;
4 |     height: 100%;
5 |     margin: 0;
6 |     padding: 0;
7 | }


--------------------------------------------------------------------------------
/front/src/App.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div id="app">
3 |     <keep-alive>
4 |       <router-view></router-view>
5 |     </keep-alive>
6 |   </div>
7 | </template>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-node-sqlite3
 2 | vue+node+sqlite3实现增删改查
 3 | 
 4 | backend 后端文件
 5 | 
 6 | front 前端文件
 7 | 
 8 | 整体实现登录注册（jwt）
 9 | 增删改查都需携带token
10 | 
11 | 网上vue+node+sqlite3完整的实现这一套功能还是很少的，期待你的Star


--------------------------------------------------------------------------------
/front/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {},
 8 |   mutations: {},
 9 |   getters: {},
10 |   actions: {},
11 |   modules: {}
12 | })


--------------------------------------------------------------------------------
/front/README.md:
--------------------------------------------------------------------------------
 1 | # crud
 2 | 
 3 | ## Project setup
 4 | ```
 5 | yarn install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | yarn serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | yarn build
16 | ```
17 | 
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/backend/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tutorial-03",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "body-parser": "^1.19.0",
14 |     "express": "^4.17.1",
15 |     "jsonwebtoken": "^8.5.1",
16 |     "md5-node": "^1.0.1",
17 |     "sqlite3": "^4.1.0"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/front/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | //引入公共样式
 6 | import './assets/assets.css'
 7 | //引入ViewUI
 8 | import ViewUI from 'view-design';
 9 | import 'view-design/dist/styles/iview.css';
10 | Vue.use(ViewUI);
11 | //引入ElementUI
12 | import ElementUI from 'element-ui';
13 | import 'element-ui/lib/theme-chalk/index.css';
14 | Vue.use(ElementUI);
15 | 
16 | Vue.config.productionTip = false
17 | 
18 | new Vue({
19 |   router,
20 |   store,
21 |   render: h => h(App)
22 | }).$mount('#app')


--------------------------------------------------------------------------------
/front/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 9 |   <title>crud</title>
10 | </head>
11 | 
12 | <body>
13 |   <noscript>
14 |     <strong>We're sorry but crud doesn't work properly without JavaScript enabled. Please enable it to
15 |       continue.</strong>
16 |   </noscript>
17 |   <div id="app">
18 |     <div>Loading...</div>
19 |   </div>
20 | </body>
21 | 
22 | </html>


--------------------------------------------------------------------------------
/front/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | 
 4 | Vue.use(VueRouter)
 5 | 
 6 | //路由懒加载
 7 | function resolveView(view) {
 8 |   return () => import(`@/views/${view}`)
 9 | }
10 | 
11 | const routes = [{
12 |     path: '/',
13 |     name: 'home',
14 |     component: resolveView('Home')
15 |   }, {
16 |     path: '/Register',
17 |     name: 'register',
18 |     component: resolveView('Register')
19 |   },
20 |   {
21 |     path: '/Skill',
22 |     name: 'skill',
23 |     component: resolveView('Skill')
24 |   }
25 | ]
26 | 
27 | const router = new VueRouter({
28 |   mode: 'history',
29 |   base: process.env.BASE_URL,
30 |   routes
31 | })
32 | 
33 | export default router


--------------------------------------------------------------------------------
/front/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "crud",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build"
 8 |   },
 9 |   "dependencies": {
10 |     "axios": "^0.19.0",
11 |     "core-js": "^3.3.2",
12 |     "element-ui": "^2.12.0",
13 |     "iview": "^1.0.1",
14 |     "jwt-decode": "^2.2.0",
15 |     "view-design": "^4.0.2",
16 |     "vue": "^2.6.10",
17 |     "vue-router": "^3.1.3",
18 |     "vuex": "^3.0.1"
19 |   },
20 |   "devDependencies": {
21 |     "@vue/cli-plugin-babel": "^4.0.0",
22 |     "@vue/cli-plugin-router": "^4.0.0",
23 |     "@vue/cli-plugin-vuex": "^4.0.0",
24 |     "@vue/cli-service": "^4.0.0",
25 |     "sass": "^1.19.0",
26 |     "sass-loader": "^8.0.0",
27 |     "vue-template-compiler": "^2.6.10"
28 |   },
29 |   "postcss": {
30 |     "plugins": {
31 |       "autoprefixer": {}
32 |     }
33 |   },
34 |   "browserslist": [
35 |     "> 1%",
36 |     "last 2 versions"
37 |   ]
38 | }
39 | 


--------------------------------------------------------------------------------
/backend/accountRouter.js:
--------------------------------------------------------------------------------
 1 | const express = require('express')
 2 | const db = require('./db')
 3 | const md5 = require('md5-node')
 4 | 
 5 | const router = express.Router()
 6 | 
 7 | //添加用户信息
 8 | router.post("/", function(request, response){
 9 | 	// 接收前端传过来的用户信息（解构赋值）
10 | 	const { username, password, passwordRepeat, email } = request.body
11 | 	//在后台定义用户注册时间才是符合规范的
12 | 	const creationTime = new Date().toLocaleString()
13 | 	if(
14 | 		typeof username != "string"       ||
15 | 		typeof password != "string"       ||
16 | 		typeof passwordRepeat != "string" ||
17 | 		typeof email != "string"          ||
18 | 		typeof creationTime != "string"
19 | 	){
20 | 		response.status(422).end()
21 | 		return
22 | 	}
23 | 	//这里对用户所有密码都进行了加密
24 | 	db.createAccount(username, md5(password), md5(passwordRepeat), email, creationTime, function(error, id){
25 | 		if(error){
26 | 			if(error.message == "SQLITE_CONSTRAINT: UNIQUE constraint failed: accounts.username"){
27 | 				response.status(400).json(["usernameTaken"])
28 | 			}else{
29 | 				response.status(500).end()
30 | 			}
31 | 		}else{
32 | 			response.setHeader("Location", "/accounts/"+id)
33 | 			response.status(201).end()
34 | 		}
35 | 	})
36 | 
37 | })
38 | 
39 | module.exports = router


--------------------------------------------------------------------------------
/backend/app.js:
--------------------------------------------------------------------------------
 1 | const express = require('express')
 2 | const bodyParser = require('body-parser')
 3 | const jwt = require('jsonwebtoken')
 4 | const settings = require('./settings')
 5 | const db = require('./db')
 6 | const accountRouter = require('./accountRouter')
 7 | const tweetRouter = require('./tweetRouter')
 8 | const md5 = require('md5-node')
 9 | 
10 | const app = express()
11 | 
12 | //解决跨域问题
13 | app.use(function (request, response, next) {
14 | 	response.setHeader("Access-Control-Allow-Origin", "*")
15 | 	response.setHeader("Access-Control-Allow-Methods", "*")
16 | 	response.setHeader("Access-Control-Allow-Headers", "*")
17 | 	response.setHeader("Access-Control-Expose-Headers", "*")
18 | 	next()
19 | })
20 | 
21 | //对POST请求过来的数据进行解析
22 | app.use(bodyParser.json())
23 | app.use(bodyParser.urlencoded({
24 | 	extended: false
25 | }))
26 | 
27 | //使得accounts接口可用
28 | app.use("/accounts", accountRouter)
29 | //使得tweets接口可用
30 | app.use("/tweets", tweetRouter)
31 | 
32 | // 用户登录并设置token令牌
33 | app.post("/tokens", function (request, response) {
34 | 	// 将前端传来的用户信息进行解构，直接获取里面的值
35 | 	const { grant_type, username, password } = request.body
36 | 	db.getAccountByUsername(username, function (error, account) {
37 | 		if (error) {
38 | 			response.status(500).end()
39 | 		} else if (!account || account.password != md5(password)) {
40 | 			response.status(400).json({ error: "invalid_client" })
41 | 		} else {
42 | 			//生成jwt(token令牌)  {expiresIn:3600}为token的过期时间，这里设置的是1小时
43 | 			const accessToken = jwt.sign({
44 | 				accountId: account.id
45 | 			}, settings.accessTokenSecret, { expiresIn: 3600 })
46 | 			const idToken = jwt.sign({
47 | 				sub: account.id,
48 | 				preferred_username: account.username
49 | 			}, "some secret that doesn't matter")
50 | 			//返回token
51 | 			response.status(200).json({
52 | 				access_token: accessToken,
53 | 				id_token: idToken
54 | 			})
55 | 		}
56 | 	})
57 | })
58 | 
59 | app.listen(3000, err => {
60 | 	if (!err) console.log('Successful Connection! Please Start Your Operation! The Port 3000')
61 | })
62 | 
63 | 
64 | // Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.  头部
65 | // eyJhY2NvdW50SWQiOjEsImlhdCI6MTU3MjU5OTQ3MSwiZXhwIjoxNTcyNTk5NDgxfQ.  载荷
66 | // 01kCpXKp4qQqrofs9LEtssgb6k3V8ZWl_tqsuvRfXeM 签名


--------------------------------------------------------------------------------
/backend/tweetRouter.js:
--------------------------------------------------------------------------------
  1 | const express = require('express')
  2 | const db = require('./db')
  3 | const settings = require('./settings')
  4 | const jwt = require('jsonwebtoken')
  5 | 
  6 | const router = express.Router()
  7 | 
  8 | //获取所有tweets信息
  9 | router.get("/", function(request, response){
 10 | 	db.getAllTweets(function(error, tweets){
 11 | 		if(error){
 12 | 			response.status(500).end()
 13 | 		}else{
 14 | 			response.status(200).json(tweets)
 15 | 		}
 16 | 	})
 17 | })
 18 | 
 19 | //根据ID获取Tweet信息
 20 | router.get("/:id", function(request, response){
 21 | 	const id = request.params.id
 22 | 	db.getTweetById(id, function(error, tweet){
 23 | 		if(error){
 24 | 			response.status(500).end()
 25 | 		}else if(tweet){
 26 | 			response.status(200).json(tweet)
 27 | 		}else{
 28 | 			response.status(404).end()
 29 | 		}
 30 | 	})
 31 | })
 32 | 
 33 | //根据ID对tweets信息进行
 34 | router.delete("/:id", function(request, response){
 35 | 	const id = request.params.id
 36 | 	db.deleteTweetById(id, function(error, tweet){
 37 | 		if(error){
 38 | 			response.status(500).end()
 39 | 		}else if(tweet){
 40 | 			response.status(200).json(tweet)
 41 | 		}else{
 42 | 			response.status(404).end()
 43 | 		}
 44 | 	})
 45 | })
 46 | 
 47 | //添加tweets信息
 48 | router.post("/", function(request, response){
 49 | 	let payload = null
 50 | 	try{
 51 | 		const authorizationHeader = request.get("Authorization")
 52 | 		const accessToken = authorizationHeader.substr("Bearer ".length)
 53 | 		payload = jwt.verify(accessToken, settings.accessTokenSecret)
 54 | 	}catch(error){
 55 | 		response.status(401).end()
 56 | 		return
 57 | 	}
 58 | 	const { accountId, message, createdAt, orders, payMethod,} = request.body
 59 | 	if(payload == null || payload.accountId != accountId){
 60 | 		response.status(401).end()
 61 | 		return
 62 | 	}
 63 | 	const errors = []
 64 | 	if(0 < errors.length){
 65 | 		response.status(400).json(errors)
 66 | 		return
 67 | 	}
 68 | 	db.createTweet(accountId, message, createdAt, orders, payMethod, function(error, id){
 69 | 		if(error){
 70 | 			if(error.message == "SQLITE_CONSTRAINT: FOREIGN KEY constraint failed"){
 71 | 				response.status(400).json(["accountDoesNotExist"])
 72 | 			}else{
 73 | 				response.status(500).end()
 74 | 			}
 75 | 		}else{
 76 | 			response.setHeader("Location", "/tweets/"+id)
 77 | 			response.status(201).end()
 78 | 		}
 79 | 	})
 80 | })
 81 | 
 82 | //根据ID修改tweets信息
 83 | router.put("/:id", function(request, response){
 84 | 	const id = request.params.id
 85 | 	const updatedAccountId = request.body.accountId
 86 | 	const updatedMessage = request.body.message
 87 | 	const updateCreatedAt = request.body.createdAt
 88 | 	const updatedOrders = request.body.orders
 89 | 	const updatedPayMethod = request.body.payMethod
 90 | 	db.updateTweetById(id, updatedAccountId, updatedMessage, updateCreatedAt, updatedOrders, updatedPayMethod, function(error){
 91 | 		if(error){
 92 | 			if(error.message == "SQLITE_CONSTRAINT: FOREIGN KEY constraint failed"){
 93 | 				response.status(400).json(["accountDoesNotExist"])
 94 | 			}else{
 95 | 				response.status(500).end()
 96 | 			}
 97 | 		}else{
 98 | 			response.status(204).end()
 99 | 		}
100 | 	})
101 | })
102 | 
103 | module.exports = router


--------------------------------------------------------------------------------
/backend/db.js:
--------------------------------------------------------------------------------
  1 | const sqlite3 = require('sqlite3')
  2 | const db = new sqlite3.Database("my-database.db")
  3 | 
  4 | db.run("PRAGMA foreign_keys = ON")
  5 | 
  6 | //CONSTRAINT unique_username UNIQUE(username)  对username做了唯一约束
  7 | // 创建accounts用户表格的命令
  8 | // CreationTime为创建时间
  9 | db.run(`
 10 | 	CREATE TABLE IF NOT EXISTS accounts (
 11 | 		id INTEGER PRIMARY KEY AUTOINCREMENT,
 12 | 		username TEXT,
 13 | 		password TEXT,
 14 | 		passwordRepeat TEXT,
 15 | 		email TEXT,
 16 | 		creationTime TEXT,
 17 | 		CONSTRAINT unique_username UNIQUE(username)
 18 | 	)
 19 | `)
 20 | // 创建Tweets表格的命令
 21 | // id INTEGER主键自动递增
 22 | db.run(`
 23 | 	CREATE TABLE IF NOT EXISTS tweets (
 24 | 		id INTEGER PRIMARY KEY AUTOINCREMENT,
 25 | 		accountId INTEGER,
 26 | 		message TEXT,
 27 | 		createdAt INTEGER,
 28 | 		orders TEXT,
 29 | 		payMethod TEXT,
 30 | 		FOREIGN KEY (accountId) REFERENCES accounts(id) ON DELETE CASCADE
 31 | 	)
 32 | `)
 33 | 
 34 | //获取Tweet表格中的所有数据
 35 | exports.getAllTweets = function(callback){
 36 | 	const query = "SELECT * FROM tweets"
 37 | 	db.all(query, function(error, tweets){
 38 | 		callback(error, tweets)
 39 | 	})
 40 | }
 41 | 
 42 | //通过ID来查看Tweet表格中的数据
 43 | exports.getTweetById = function(id, callback){
 44 | 	const query = "SELECT * FROM tweets WHERE id = ?"
 45 | 	const values = [id]
 46 | 	db.get(query, values, function(error, tweet){
 47 | 		callback(error, tweet)
 48 | 	})
 49 | }
 50 | 
 51 | //通过ID来删除Tweet表格中的数据
 52 | exports.deleteTweetById = function(id, callback){
 53 | 	const query = "DELETE FROM tweets WHERE id = ?"
 54 | 	const values = [id]
 55 | 	db.run(query, values, function(error){
 56 | 		callback(error)
 57 | 	})
 58 | }
 59 | 
 60 | //创建Tweet表格
 61 | exports.createTweet = function(accountId, message, createdAt, orders, payMethod, callback){
 62 | 	const query = "INSERT INTO tweets (accountId, message, createdAt, orders, payMethod) VALUES (?, ?, ?, ?, ?)"
 63 | 	const values = [accountId, message, createdAt, orders, payMethod]
 64 | 	db.run(query, values, function(error){
 65 | 		callback(error, this.lastID)
 66 | 	})
 67 | }
 68 | 
 69 | //通过ID来更新Tweet表格中的数据
 70 | exports.updateTweetById = function(id, updatedAccountId, updatedMessage, updateCreatedAt, updatedOrders, updatedPayMethod, callback){
 71 | 	const query = `
 72 | 	UPDATE tweets SET
 73 | 		accountId = ?,
 74 | 		message = ?,
 75 | 		createdAt = ?,
 76 | 		orders = ?,
 77 | 		payMethod = ?
 78 | 	WHERE
 79 | 		id = ?
 80 | 	`
 81 | 	const values = [updatedAccountId, updatedMessage, updateCreatedAt, updatedOrders, updatedPayMethod, id]
 82 | 	db.run(query, values, function(error){
 83 | 		callback(error)
 84 | 	})
 85 | 
 86 | }
 87 | 
 88 | //将前端传过来的用户信息插入
 89 | exports.createAccount = function(username, password, passwordRepeat, email, creationTime, callback){
 90 | 	const query = "INSERT INTO accounts (username, password, passwordRepeat, email, creationTime) VALUES (?, ?, ?, ?, ?)"
 91 | 	const values = [username,password,passwordRepeat,email,creationTime]
 92 | 	db.run(query, values, function(error){
 93 | 		callback(error, this.lastID)
 94 | 	})
 95 | }
 96 | 
 97 | //通过姓名查找用户信息
 98 | exports.getAccountByUsername = function(username, callback){
 99 | 	const query = "SELECT * FROM accounts WHERE username = ?"
100 | 	const values = [username]
101 | 	db.get(query, values, function(error, account){
102 | 		callback(error, account)
103 | 	})
104 | }


--------------------------------------------------------------------------------
/front/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="home" :style="{ height: totalHeight }">
  3 |     <Form
  4 |       ref="formInline"
  5 |       :model="formInline"
  6 |       :rules="ruleInline"
  7 |       class="TopCon"
  8 |       @submit.native.prevent="login()"
  9 |     >
 10 |       <div class="topBorder">
 11 |         <FormItem prop="user">
 12 |           <Input
 13 |             type="text"
 14 |             v-model="formInline.user"
 15 |             placeholder="Username"
 16 |           ></Input>
 17 |         </FormItem>
 18 |         <FormItem prop="password">
 19 |           <Input
 20 |             type="password"
 21 |             v-model="formInline.password"
 22 |             placeholder="Password"
 23 |             password
 24 |             @keyup.enter.native="handleSubmit('formInline')"
 25 |           ></Input>
 26 |         </FormItem>
 27 |       </div>
 28 |       <FormItem class="bottomBorder">
 29 |         <!-- 登录 -->
 30 |         <Button
 31 |           :style="{ backgroundColor: '#A5D3DF' }"
 32 |           @click="handleSubmit('formInline')"
 33 |         >
 34 |           <span>Login</span>
 35 |         </Button>
 36 |         <!-- 注册 -->
 37 |         <Button :style="{ backgroundColor: '#A5D3DF' }" @click="jumpRegister">
 38 |           <span>Register</span>
 39 |         </Button>
 40 |       </FormItem>
 41 |     </Form>
 42 |   </div>
 43 | </template>
 44 | 
 45 | <script>
 46 | const client = require("../client")
 47 | export default {
 48 |   name: "home",
 49 |   data() {
 50 |     return {
 51 |       formInline: {
 52 |         user: "",
 53 |         password: "",
 54 |       },
 55 |       ruleInline: {
 56 |         user: [
 57 |           {
 58 |             required: true,
 59 |             message: "Please fill in the user name",
 60 |             trigger: "blur",
 61 |           },
 62 |         ],
 63 |         password: [
 64 |           {
 65 |             required: true,
 66 |             message: "Please fill in the password.",
 67 |             trigger: "blur",
 68 |           },
 69 |           {
 70 |             type: "string",
 71 |             min: 6,
 72 |             message: "The password length cannot be less than 6 bits",
 73 |             trigger: "blur",
 74 |           },
 75 |         ],
 76 |       },
 77 |       errors: [],
 78 |       totalHeight: "",
 79 |     }
 80 |   },
 81 |   created() {
 82 |     let bodyHeight = document.body.clientHeight - 1 + "px"
 83 |     this.totalHeight = bodyHeight
 84 |   },
 85 |   methods: {
 86 |     //用户登录
 87 |     handleSubmit(name) {
 88 |       this.$refs[name].validate((valid) => {
 89 |         if (valid) {
 90 |           //请求登录接口，获取token
 91 |           client.login(
 92 |             this.formInline.user,
 93 |             this.formInline.password,
 94 |             (errors, id, username) => {
 95 |               if (errors.length == 0) {
 96 |                 //先将用户信息存储到localStorage
 97 |                 let personCon = {
 98 |                   user: this.formInline.user,
 99 |                 }
100 |                 let personlists = JSON.parse(
101 |                   localStorage.getItem("persons") || "[]"
102 |                 )
103 |                 personlists.unshift(personCon)
104 |                 localStorage.setItem("persons", JSON.stringify(personlists))
105 |                 this.formInline = ""
106 |                 this.$router.push("/Skill")
107 |               } else {
108 |                 this.errors = errors
109 |                 this.$Message.error(`${this.errors}`)
110 |               }
111 |             }
112 |           )
113 |         } else {
114 |           this.$Message.error("Fail!")
115 |         }
116 |       })
117 |     },
118 |     //用户注册
119 |     jumpRegister() {
120 |       this.$router.push("Register")
121 |     },
122 |   },
123 | }
124 | </script>
125 | 
126 | <style lang ='scss' scoped>
127 | .home {
128 |   width: 100%;
129 |   height: 100%;
130 |   display: flex;
131 |   justify-content: center;
132 |   align-items: center;
133 |   background-image: url("../assets/background.png");
134 |   background-attachment: fixed;
135 |   background-size: cover;
136 |   .TopCon {
137 |     width: 470px;
138 |     height: 300px;
139 |     background-color: rgba(62, 110, 144, 0.6);
140 |     border-radius: 8%;
141 |     .topBorder {
142 |       width: 80%;
143 |       margin: 0 auto;
144 |       margin-top: 17%;
145 |     }
146 |     .bottomBorder {
147 |       width: 80%;
148 |       display: flex;
149 |       margin: 0 auto;
150 |       justify-content: space-between;
151 |       .ivu-btn {
152 |         width: 100px;
153 |         margin: 21px;
154 |       }
155 |     }
156 |   }
157 | }
158 | </style>


--------------------------------------------------------------------------------
/front/src/views/Register.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="register" :style="{ height: totalHeight }">
  3 |     <Form
  4 |       ref="formCustom"
  5 |       :model="formCustom"
  6 |       :rules="ruleCustom"
  7 |       :label-width="80"
  8 |       class="TopCon"
  9 |       @submit.native.prevent="createAccount()"
 10 |     >
 11 |       <div class="topBorder">
 12 |         <FormItem prop="user">
 13 |           <Input
 14 |             type="text"
 15 |             v-model="formCustom.user"
 16 |             placeholder="Username"
 17 |           ></Input>
 18 |         </FormItem>
 19 |         <FormItem prop="passwd">
 20 |           <Input
 21 |             type="password"
 22 |             v-model="formCustom.passwd"
 23 |             placeholder="Password"
 24 |             password
 25 |           ></Input>
 26 |         </FormItem>
 27 |         <FormItem prop="passwdCheck">
 28 |           <Input
 29 |             type="password"
 30 |             v-model="formCustom.passwdCheck"
 31 |             placeholder="Password Again"
 32 |             password
 33 |           ></Input>
 34 |         </FormItem>
 35 |         <FormItem prop="mail">
 36 |           <Input
 37 |             v-model="formCustom.mail"
 38 |             placeholder="E-mail"
 39 |             @keyup.enter.native="handleSubmit('formCustom')"
 40 |           ></Input>
 41 |         </FormItem>
 42 |       </div>
 43 |       <FormItem class="bottomBorder">
 44 |         <!-- 登录 -->
 45 |         <Button
 46 |           :style="{ backgroundColor: '#A5D3DF' }"
 47 |           @click="handleSubmit('formCustom')"
 48 |         >
 49 |           <span>Login</span>
 50 |         </Button>
 51 |       </FormItem>
 52 |     </Form>
 53 |   </div>
 54 | </template>
 55 | 
 56 | <script>
 57 | const client = require("../client")
 58 | export default {
 59 |   name: "register",
 60 |   data() {
 61 |     //密码格式验证
 62 |     const validatePass = (rule, value, callback) => {
 63 |       if (value === "") {
 64 |         callback(new Error("Please enter your password"))
 65 |       } else {
 66 |         if (this.formCustom.passwdCheck !== "") {
 67 |           // 对第二个密码框单独验证
 68 |           this.$refs.formCustom.validateField("passwdCheck")
 69 |         }
 70 |         callback()
 71 |       }
 72 |     }
 73 |     //两次密码是否一致验证
 74 |     const validatePassCheck = (rule, value, callback) => {
 75 |       if (value === "") {
 76 |         callback(new Error("Please enter your password again"))
 77 |       } else if (value !== this.formCustom.passwd) {
 78 |         callback(new Error("The two input passwords do not match!"))
 79 |       } else {
 80 |         callback()
 81 |       }
 82 |     }
 83 |     return {
 84 |       errors: [],
 85 |       formCustom: {
 86 |         user: "",
 87 |         passwd: "",
 88 |         passwdCheck: "",
 89 |         mail: "",
 90 |       },
 91 |       ruleCustom: {
 92 |         user: [
 93 |           {
 94 |             required: true,
 95 |             message: "Please fill in the user name",
 96 |             trigger: "blur",
 97 |           },
 98 |         ],
 99 |         passwd: [{ validator: validatePass, trigger: "blur" }],
100 |         passwdCheck: [{ validator: validatePassCheck, trigger: "blur" }],
101 |         mail: [
102 |           {
103 |             required: true,
104 |             message: "Mailbox cannot be empty",
105 |             trigger: "blur",
106 |           },
107 |           { type: "email", message: "Incorrect email format", trigger: "blur" },
108 |         ],
109 |       },
110 |       totalHeight: "",
111 |     }
112 |   },
113 |   created() {
114 |     let bodyHeight = document.body.clientHeight - 1 + "px"
115 |     this.totalHeight = bodyHeight
116 |   },
117 |   methods: {
118 |     handleSubmit(name) {
119 |       this.$refs[name].validate((valid) => {
120 |         if (valid) {
121 |           //用户注册接口
122 |           client.createAccount(
123 |             this.formCustom.user,
124 |             this.formCustom.passwd,
125 |             this.formCustom.passwdCheck,
126 |             this.formCustom.mail,
127 |             (errors, id) => {
128 |               if (errors.length == 0) {
129 |                 let personConRegister = {
130 |                   user: this.formCustom.user,
131 |                 }
132 |                 let personlists = JSON.parse(
133 |                   localStorage.getItem("persons") || "[]"
134 |                 )
135 |                 personlists.unshift(personConRegister)
136 |                 localStorage.setItem("persons", JSON.stringify(personlists))
137 |                 this.$Message.success("Created!")
138 |                 this.formCustom = ""
139 |                 this.$router.push("/Skill")
140 |               } else {
141 |                 this.errors = errors
142 |                 this.$Message.error(`${this.errors}`)
143 |               }
144 |             }
145 |           )
146 |         } else {
147 |           this.$Message.error("Fail!")
148 |         }
149 |       })
150 |     },
151 |   },
152 | }
153 | </script>
154 | 
155 | <style lang ='scss' scoped>
156 | .register {
157 |   width: 100%;
158 |   display: flex;
159 |   justify-content: center;
160 |   align-items: center;
161 |   background-image: url("../assets/registerImg.png");
162 |   background-attachment: fixed;
163 |   background-size: cover;
164 |   .TopCon {
165 |     width: 470px;
166 |     height: 300px;
167 |     background-color: rgba(62, 110, 144, 0.6);
168 |     border-radius: 8%;
169 |     .topBorder {
170 |       width: 90%;
171 |       margin-left: -4%;
172 |       margin-top: 5%;
173 |     }
174 |     .bottomBorder {
175 |       width: 100%;
176 |       display: flex;
177 |       margin: 0 auto;
178 |       justify-content: space-between;
179 |       .ivu-btn {
180 |         width: 200px;
181 |         margin-left: -21%;
182 |       }
183 |     }
184 |   }
185 | }
186 | </style>


--------------------------------------------------------------------------------
/front/src/client.js:
--------------------------------------------------------------------------------
  1 | const jwtDecode = require('jwt-decode')
  2 | let accessToken = null
  3 | 
  4 | //获取所有tweets信息接口
  5 | export const getAllTweets = function (callback) {
  6 | 	const request = new XMLHttpRequest()
  7 | 	request.open("GET", "http://localhost:3000/tweets")
  8 | 	request.send()
  9 | 	request.addEventListener("load", () => {
 10 | 		const status = request.status
 11 | 		switch (status) {
 12 | 			case 200:
 13 | 				const bodyAsString = request.responseText
 14 | 				const tweets = JSON.parse(bodyAsString)
 15 | 				callback([], tweets)
 16 | 				global.console.log(tweets)
 17 | 				break
 18 | 			case 500:
 19 | 				callback(["Server error"])
 20 | 				break
 21 | 			default:
 22 | 				callback(["Server error"])
 23 | 		}
 24 | 	})
 25 | }
 26 | 
 27 | //根据ID搜索tweets信息接口
 28 | export const getSearchTweets = function (searchId, callback) {
 29 | 	const request = new XMLHttpRequest()
 30 | 	request.open("GET", "http://localhost:3000/tweets/" + searchId)
 31 | 	request.send()
 32 | 	request.addEventListener("load", () => {
 33 | 		const status = request.status
 34 | 		switch (status) {
 35 | 			case 200:
 36 | 				const bodyAsString = request.responseText
 37 | 				const tweets = JSON.parse(bodyAsString)
 38 | 				callback([], tweets)
 39 | 				break
 40 | 			case 500:
 41 | 				callback(["Server error"])
 42 | 				break
 43 | 			default:
 44 | 				callback(["Server error"])
 45 | 		}
 46 | 	})
 47 | }
 48 | 
 49 | //根据ID对tweets信息进行删除
 50 | export const getDelTweets = function (infoId, callback) {
 51 | 	const request = new XMLHttpRequest()
 52 | 	request.open("DELETE", "http://localhost:3000/tweets/" + infoId)
 53 | 	request.send()
 54 | 	request.addEventListener("load", () => {
 55 | 		const status = request.status
 56 | 		switch (status) {
 57 | 			case 200:
 58 | 				callback(["Delete success"])
 59 | 				break
 60 | 			case 500:
 61 | 				callback(["Server error"])
 62 | 				break
 63 | 			default:
 64 | 				callback(["Server error"])
 65 | 		}
 66 | 	})
 67 | }
 68 | 
 69 | //修改tweets信息接口
 70 | export const modifyTweet = function (id, accountId, message, createdAt, orders, payMethod, callback) {
 71 | 	const tweet = {
 72 | 		id,
 73 | 		accountId,
 74 | 		message,
 75 | 		createdAt,
 76 | 		orders,
 77 | 		payMethod
 78 | 	}
 79 | 	const request = new XMLHttpRequest()
 80 | 	request.open("PUT", "http://localhost:3000/tweets/" + id)
 81 | 	request.send(JSON.stringify(tweet))
 82 | 	request.addEventListener("load", () => {
 83 | 		const status = request.status
 84 | 		switch (status) {
 85 | 			case 201:
 86 | 				const location = request.getResponseHeader("Location")
 87 | 				callback([], location)
 88 | 				break
 89 | 			case 400:
 90 | 				const errors = JSON.parse(request.responseText)
 91 | 				callback(errors)
 92 | 				break
 93 | 			case 500:
 94 | 				callback(["Unknown server error"])
 95 | 				break
 96 | 			default:
 97 | 				callback(["Unknown server error"])
 98 | 		}
 99 | 	})
100 | }
101 | 
102 | //添加tweets信息接口
103 | export const createTweet = function (accountId, message, orders, payMethod, callback) {
104 | 	const tweet = {
105 | 		accountId,
106 | 		message,
107 | 		orders,
108 | 		payMethod,
109 | 		createdAt: Date.now()
110 | 	}
111 | 	const request = new XMLHttpRequest()
112 | 	request.open("POST", "http://localhost:3000/tweets")
113 | 	request.setRequestHeader("Content-Type", "application/json")
114 | 	request.setRequestHeader("Authorization", "Bearer " + accessToken)
115 | 	request.send(JSON.stringify(tweet))
116 | 	global.console.log(JSON.stringify(tweet))
117 | 	request.addEventListener("load", () => {
118 | 		const status = request.status
119 | 		switch (status) {
120 | 			case 201:
121 | 				const location = request.getResponseHeader("Location")
122 | 				callback([], location)
123 | 				break
124 | 			case 400:
125 | 				const errors = JSON.parse(request.responseText)
126 | 				callback(errors)
127 | 				break
128 | 			case 401:
129 | 				callback(["unauthorired"])
130 | 				break
131 | 			case 500:
132 | 				callback(["Unknown server error"])
133 | 				break
134 | 			default:
135 | 				callback(["Unknown server error"])
136 | 		}
137 | 	})
138 | }
139 | 
140 | //用户注册接口
141 | export const createAccount = function (username, password, passwordRepeat, email, callback) {
142 | 	const account = {
143 | 		username,
144 | 		password,
145 | 		passwordRepeat,
146 | 		email
147 | 	}
148 | 	const request = new XMLHttpRequest()
149 | 	request.open("POST", "http://localhost:3000/accounts")
150 | 	request.setRequestHeader("Content-Type", "application/json")
151 | 	request.send(JSON.stringify(account))
152 | 	global.console.log(account)
153 | 	request.addEventListener("load", () => {
154 | 		const status = request.status
155 | 		switch (status) {
156 | 			case 201:
157 | 				const location = request.getResponseHeader("Location")
158 | 				callback([], location)
159 | 				break
160 | 			case 400:
161 | 				const errors = JSON.parse(request.responseText)
162 | 				callback(errors)
163 | 				break
164 | 			case 500:
165 | 				callback(["Unknown server error"])
166 | 				break
167 | 			default:
168 | 				callback(["Unknown server error"])
169 | 		}
170 | 	})
171 | }
172 | 
173 | //用户登录接口
174 | export const login = function (username, password, callback) {
175 | 	const request = new XMLHttpRequest()
176 | 	request.open("POST", "http://localhost:3000/tokens")
177 | 	request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
178 | 	request.send("grant_type=password&username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password))
179 | 	request.addEventListener("load", () => {
180 | 		const status = request.status
181 | 		switch (status) {
182 | 			case 200:
183 | 				var body = JSON.parse(request.responseText)
184 | 				const idToken = body.id_token
185 | 				accessToken = body.access_token
186 | 				const userInfo = jwtDecode(idToken)
187 | 				const id = userInfo.sub
188 | 				const username = userInfo.preferred_username
189 | 				callback([], id, username)
190 | 				break
191 | 			case 400:
192 | 				var body = JSON.parse(request.responseText)
193 | 				callback([body.error])
194 | 				break
195 | 			case 500:
196 | 				callback(["Unknown server error"])
197 | 				break
198 | 			default:
199 | 				callback(["Unknown server error"])
200 | 		}
201 | 	})
202 | }


--------------------------------------------------------------------------------
/front/src/views/Skill.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="skill" :style="{height:totalHeight}">
  3 |     <h1>{{user}}</h1>
  4 |     <div @click="logout">
  5 |       <Icon type="md-power" size="30" />
  6 |     </div>
  7 |     <!-- ADD INFO -->
  8 |     <Row class="addInfo">
  9 |       <form @submit.prevent="createTweet()">
 10 |         <Col span="4">
 11 |           <Input v-model="message" class="firstItem" placeholder="Please enter the date" />
 12 |         </Col>
 13 |         <Col span="4">
 14 |           <Input v-model="orders" class="secondItem" placeholder="Please enter money" />
 15 |         </Col>
 16 |         <Col span="4">
 17 |           <Input v-model="payMethod" class="thirdItem" placeholder="Please enter pay methods" />
 18 |         </Col>
 19 |         <Col span="2">
 20 |           <input type="submit" value="ADD" class="beautifyBtn"></input>
 21 |         </Col>
 22 |       </form>
 23 |       <Col span="8">
 24 |         <Input search class="searchItem" v-model="searchId" placeholder="Please enter the query id"/>
 25 |         <div class="actionScope" @click="instance('success')"></div>
 26 |       </Col>
 27 |     </Row>
 28 |     <div class="showInfo">
 29 |       <Table border :columns="columns12" :data="dataList">
 30 |         <template slot-scope="{ row }" slot="message">
 31 |           <strong>{{ row.message }}</strong>
 32 |         </template>
 33 |         <template slot-scope="{ row, index }" slot="action">
 34 |           <Button  size="small" style="margin-right: 5px" @click="alterData(row.id)" class="update">Alter</Button>
 35 |           <Button  size="small" @click="remove(row.id)" class="delete">Delete</Button>
 36 |         </template>
 37 |       </Table>
 38 |     </div>
 39 |     <!-- Modify user dialog -->
 40 |     <el-dialog
 41 |       title="Modify User Dialog"
 42 |       :visible.sync="editDialogVisible"
 43 |       width="50%">
 44 |       <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign" @submit.prevent="modifyTweet()">
 45 |     <el-form-item label="Date：" label-width="100px">
 46 |     <el-input v-model="modifyMessage"></el-input>
 47 |     </el-form-item>
 48 |     <el-form-item label="Expenditure/Income：" label-width="100px">
 49 |     <el-input v-model="modifyOrders"></el-input>
 50 |     </el-form-item>
 51 |     <el-form-item label="Type Of Payment：" label-width="100px">
 52 |     <el-input v-model="modifyPayMethod"></el-input>
 53 |     </el-form-item>
 54 |   </el-form>
 55 |       <span slot="footer" class="dialog-footer">
 56 |       <el-button @click="editDialogVisible = false">取 消</el-button>
 57 |       <el-button type="primary" @click="modifyTweet">确 定</el-button>
 58 |   </span>
 59 | </el-dialog>
 60 |   </div>
 61 | </template>
 62 | 
 63 | <script>
 64 | const client = require("../client")
 65 | export default {
 66 |   data() {
 67 |     return {
 68 |       user: "",
 69 |       totalHeight: "",
 70 |       accountId: 1,
 71 |       message: "",
 72 |       orders: "",
 73 |       payMethod: "",
 74 |       searchId: "",
 75 |       createdAt: "",
 76 |       // 控制修改用户对话框的显示于隐藏
 77 |       editDialogVisible: false,
 78 |       modifyId: "",
 79 |       modifyMessage: "",
 80 |       modifyOrders: "",
 81 |       modifyPayMethod: "",
 82 |       dataList: [],
 83 |       errors: [],
 84 |       columns12: [
 85 |         {
 86 |           title: "ID",
 87 |           key: "id",
 88 |         },
 89 |         {
 90 |           title: "Date",
 91 |           slot: "message",
 92 |         },
 93 |         {
 94 |           title: "Expenditure/Income",
 95 |           key: "orders",
 96 |         },
 97 |         {
 98 |           title: "Type Of Payment",
 99 |           key: "payMethod",
100 |         },
101 |         {
102 |           title: "Remarks",
103 |           slot: "action",
104 |           width: 150,
105 |           align: "center",
106 |         },
107 |       ],
108 |     }
109 |   },
110 |   created() {
111 |     this.getUserName()
112 |     //元素创建完后调整背景图片大小与屏幕一样高
113 |     let bodyHeight = document.body.clientHeight - 1 + "px"
114 |     this.totalHeight = bodyHeight
115 |     this.showTweet()
116 |   },
117 |   methods: {
118 |     //退出登录，清除localStorage中的用户信息并跳转到登录页
119 |     logout() {
120 |       localStorage.removeItem("persons")
121 |       this.$router.push("/")
122 |     },
123 |     //从localStorage中获取登录用户名
124 |     getUserName() {
125 |       //如果用户名未登录，返回空。做判断防止报错
126 |       let judegExist = JSON.parse(localStorage.getItem("persons"))
127 |       if (judegExist) {
128 |         this.user = JSON.parse(localStorage.getItem("persons"))[0].user
129 |       } else {
130 |         return false
131 |       }
132 |     },
133 |     //数据删除
134 |     remove(id) {
135 |       let filtersIndex = id
136 |       let judegExist = JSON.parse(localStorage.getItem("persons"))
137 |       if (judegExist) {
138 |         client.getDelTweets(filtersIndex, (errors, tweets) => {
139 |           this.$message.success("Delete Success")
140 |           this.showTweet()
141 |         })
142 |       } else {
143 |         this.$message.error("Delete Fali Please Login First")
144 |       }
145 |     },
146 |     //添加数据(并作出判断为输入框必须有值))
147 |     createTweet() {
148 |       let judegExist = JSON.parse(localStorage.getItem("persons"))
149 |       if (judegExist) {
150 |         client.createTweet(
151 |           this.accountId,
152 |           this.message,
153 |           this.orders,
154 |           this.payMethod,
155 |           (errors, id) => {
156 |             if (
157 |               errors.length == 0 &&
158 |               this.message !== "" &&
159 |               this.orders !== "" &&
160 |               this.payMethod !== ""
161 |             ) {
162 |               this.$message({
163 |                 message: "Add success！",
164 |                 type: "success",
165 |               })
166 |               this.message = ""
167 |               this.orders = ""
168 |               this.payMethod = ""
169 |               //添加后再此调用改方法，显示最新数据
170 |               this.showTweet()
171 |             } else {
172 |               this.errors = errors
173 |               this.$message.error("Add fali")
174 |             }
175 |           }
176 |         )
177 |       } else {
178 |         this.$message.error("Add Fali Please Login First")
179 |       }
180 |     },
181 |     //将数据进行展示
182 |     showTweet() {
183 |       client.getAllTweets((errors, tweets) => {
184 |         if (errors.length == 0) {
185 |           this.dataList = tweets
186 |           console.log(tweets)
187 |         } else {
188 |           this.errors = errors
189 |         }
190 |       })
191 |     },
192 |     //根据ID进行搜索
193 |     instance(type) {
194 |       let judegExist = JSON.parse(localStorage.getItem("persons"))
195 |       if (judegExist) {
196 |         client.getSearchTweets(this.searchId, (errors, tweets) => {
197 |           if (errors.length == 0) {
198 |             const title = "Query Success"
199 |             const content = `<p>ID is：${tweets.id}</p><p>Date：${tweets.message}</p>
200 |             <p>Expenditure/Income：${tweets.orders}</p><p>Type Of Payment：${tweets.payMethod}</p>`
201 |             switch (type) {
202 |               case "info":
203 |                 this.$Modal.info({
204 |                   title: title,
205 |                   content: content,
206 |                 })
207 |                 break
208 |               case "success":
209 |                 this.$Modal.success({
210 |                   title: title,
211 |                   content: content,
212 |                 })
213 |                 break
214 |             }
215 |           } else {
216 |             this.errors = errors
217 |             this.$message.error("no data")
218 |           }
219 |         })
220 |       } else {
221 |         this.$message.error("Query Fali Please Login First")
222 |       }
223 |     },
224 |     //根据ID进行修改
225 |     alterData(id) {
226 |       client.getSearchTweets(id, (errors, tweets) => {
227 |         if (errors.length == 0) {
228 |           this.createdAt = tweets.createdAt
229 |         } else {
230 |           console.log(errors)
231 |         }
232 |         this.modifyId = id
233 |         this.editDialogVisible = true
234 |       })
235 |     },
236 |     modifyTweet() {
237 |       client.modifyTweet(
238 |         this.modifyId,
239 |         this.accountId,
240 |         this.modifyMessage,
241 |         this.createdAt,
242 |         this.modifyOrders,
243 |         this.modifyPayMethod,
244 |         (errors, modifyId) => {
245 |           if (errors.length == 0) {
246 |             this.$message({
247 |               message: "Modify success！",
248 |               type: "success",
249 |             })
250 |             //添加后再此调用改方法，显示最新数据
251 |             this.showTweet()
252 |           } else {
253 |             this.errors = errors
254 |             this.$message.error("Add fali")
255 |           }
256 |         }
257 |       )
258 |     },
259 |   },
260 |   //当页面不是登录页，即使更新用户信息
261 |   watch: {
262 |     "$route.path"(newVal, oldVal) {
263 |       if (newVal !== "/") {
264 |         this.getUserName()
265 |       } else {
266 |         return false
267 |       }
268 |     },
269 |   },
270 | }
271 | </script>
272 | 
273 | <style lang ='scss' scoped>
274 | .skill {
275 |   width: 100%;
276 |   display: flex;
277 |   justify-content: center;
278 |   align-items: center;
279 |   background-image: url("../assets/CRUD.png");
280 |   background-attachment: fixed;
281 |   background-size: cover;
282 |   h1 {
283 |     &:nth-child(1) {
284 |       position: absolute;
285 |       top: 40px;
286 |       right: 150px;
287 |     }
288 |   }
289 |   .ivu-icon {
290 |     position: absolute;
291 |     top: 45px;
292 |     right: 100px;
293 |     &:hover {
294 |       cursor: pointer;
295 |     }
296 |   }
297 |   .showInfo {
298 |     width: 80%;
299 |     height: 400px;
300 |     margin-top: 100px;
301 |   }
302 |   .addInfo {
303 |     width: 80%;
304 |     height: 50px;
305 |     position: absolute;
306 |     top: 130px;
307 |     .firstItem,
308 |     .secondItem,
309 |     .thirdItem {
310 |       width: 200px;
311 |       padding-right: 20px;
312 |     }
313 |     .searchItem {
314 |       width: 200px;
315 |       margin-left: 252px;
316 |     }
317 |   }
318 |   .beautifyBtn {
319 |     width: 60px;
320 |     height: 30px;
321 |     background: #fc5c7d; /* fallback for old browsers */
322 |     background: -webkit-linear-gradient(
323 |       to right,
324 |       #6a82fb,
325 |       #fc5c7d
326 |     ); /* Chrome 10-25, Safari 5.1-6 */
327 |     background: linear-gradient(
328 |       to right,
329 |       #6a82fb,
330 |       #fc5c7d
331 |     ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
332 |     color: white;
333 |     border: none;
334 |     border-radius: 5px;
335 |   }
336 |   .update {
337 |     color: white;
338 |     background: #fc5c7d;
339 |     background: -webkit-linear-gradient(to right, #6a82fb, #fc5c7d);
340 |     background: linear-gradient(to right, #6a82fb, #fc5c7d);
341 |   }
342 |   .delete {
343 |     color: white;
344 |     background: #ff512f;
345 |     background: -webkit-linear-gradient(to right, #dd2476, #ff512f);
346 |     background: linear-gradient(to right, #dd2476, #ff512f);
347 |   }
348 |   .actionScope {
349 |     width: 40px;
350 |     height: 30px;
351 |     position: absolute;
352 |     opacity: 0;
353 |     z-index: 999;
354 |     top: 2px;
355 |     right: -80px;
356 |   }
357 | }
358 | </style>


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