用户管理完整代码
后端代码
启动项
// node 后端服务器
const userApi = require('./api/userApi')
const express = require('express')
const app = express()
// 采用设置所有均可访问的方法解决跨域问题
app.all('*', function (req, res, next) {
// 设置允许跨域的域名，*代表允许任意域名跨域
res.header('Access-Control-Allow-Origin', '*')
// 允许的header类型
res.header('Access-Control-Allow-Headers', 'content-type')
// 跨域允许的请求方式
res.header('Access-Control-Allow-Methods', 'DELETE,PUT,POST,GET,OPTIONS')
if (req.method.toLowerCase() === 'options') {
res.send(200)// 让options尝试请求快速结束
} else { next() }
})
app.use(express.json())
app.use(express.urlencoded({ extended: false }))
// 后端api路由
app.use('/api/user', userApi)
// 监听端口
app.listen(3000)
console.log('success listen at port:3000......')
连接数据库
var mssql = require('mssql')
// 数据库连接配置
// 执行sql,返回数据.
const units = {
sql: function (sql, callback) {
/// 连接池
new mssql.ConnectionPool(units.config())
.connect()
.then(pool => {
let ps = new mssql.PreparedStatement(pool)
ps.prepare(sql, err => {
if (err) {
console.log(err)
return
}
ps.execute('', (err, result) => {
if (err) {
console.log(err)
return
}
ps.unprepare(err => {
if (err) {
console.log(err)
callback(err, null)
return
}
callback(err, result)
})
})
})
}).catch(err => {
console.log('Database Connection Failed! Bad Config:', err)
})
},
config: function () {
return {
user: 'sa',
password: '123456',
server: 'localhost',
database: 'db_WH',
port: 1433,
options: {
"encrypt": false
},
pool: {
max: 10,
min: 0,
idleTimeoutMillis: 30000
}
}
}
}
module.exports = units
UserApi
var units = require('../db')
var express = require('express')
var router = express.Router()
// 查询所有
router.post('/all', (req, res) => {
let sqlLanguage = "select * from wh_user"
units.sql(sqlLanguage, function (err, result) {
let msg = ''
let code = 404
if (err) {
msg = err
code = 404
} else {
msg = '成功'
code = 200
}
console.log('data :', result)
res.json({
code: code,
data: result.recordset,
msg: msg
})
})
})
//查询姓名
router.post('/userName', (req, res) => {
console.log(req.body.name)
let sqlLanguage = "select * from wh_user where u_name =\'" + req.body.name + '\'';
console.log(sqlLanguage)
units.sql(sqlLanguage, function (err, result) {
let msg = ''
let code = 404
if (err) {
msg = err
code = 404
} else {
msg = '成功'
code = 200
}
console.log('data :', result)
res.json({
code: code,
data: result.recordset,
msg: msg
})
})
})
//保存数据
router.post('/save', (req, res) => {
const result = `('${req.body.no}','${req.body.name}','${req.body.password}','${req.body.age}','${req.body.sex}','${req.body.phone}')`
console.log(result)
let sqlLanguage = "insert into wh_user(u_no,u_name,u_pwd,u_age,u_sex,u_phone) values " + result;
console.log(sqlLanguage)
units.sql(sqlLanguage, function (err, result) {
let msg = ''
let code = 404
if (err) {
msg = err
code = 404
} else {
msg = '成功'
code = 200
}
console.log('data :', result)
res.json({
code: code,
data: result.recordset,
msg: msg
})
})
})
//修改数据
router.post('/mod', (req, res) => {
console.log(req.body.no)
const result=`update wh_user set u_name='${req.body.name}',u_pwd='${req.body.password}',u_age='${req.body.age}',u_sex='${req.body.sex}',u_phone='${req.body.phone}' where u_no='${req.body.no}'`
console.log(result)
console.log(req.body.password)
console.log(req.body.no)
units.sql(result, function (err, result) {
let msg = ''
let code = 404
if (err) {
msg = err
code = 404
} else {
msg = '成功'
code = 200
}
console.log('data :', result)
res.json({
code: code,
data: result.recordset,
msg: msg
})
})
})
//删除信息
router.post('/del', (req, res) => {
console.log(req.body.no)
let sqlLanguage = "delete from wh_user where u_no=\'" + req.body.no + '\'';
console.log(sqlLanguage)
units.sql(sqlLanguage, function (err, result) {
let msg = ''
let code = 404
if (err) {
msg = err
code = 404
} else {
msg = '成功'
code = 200
}
console.log('data :', result)
res.json({
code: code,
data: result.recordset,
msg: msg
})
})
})
module.exports = router
前端代码
<template>
<div>
<!-- 功能按钮 -->
<div style="margin-bottom: 5px;">
<el-input v-model="name" placeholder="请输入名字" suffix-icon="el-icon-search" style="width: 200px;"></el-input>
<el-button type="primary" style="margin-left: 5px;" @click="searchByName">查询</el-button>
<el-button v-model="name" type="success" @click="resetting">重置</el-button>
<el-button type="primary" style="margin-left: 5px;" @click="centerDialogVisible = true">新增</el-button>
</div>
<!-- 信息表格 -->
<el-table :data="tableData" :header-cell-style="{ background: '#f2f5fc', color: '#555555' }" border>
<el-table-column prop="u_no" label="账号" width="180">
</el-table-column>
<el-table-column prop="u_name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="u_age" label="年龄" width="80">
</el-table-column>
<el-table-column prop="u_sex" label="性别" width="80">
</el-table-column>
<el-table-column prop="u_phone" label="电话" width="180">
</el-table-column>
<el-table-column prop="u_role" label="角色" width="120">
</el-table-column>
<el-table-column prop="operate" label="操作">
<template slot-scope="scope">
<el-button size="small" type="success"
@click="mod(scope.row); centerDialogVisible = true">编辑</el-button>
<el-popconfirm title="确定删除吗？" @confirm="del(scope.row.u_no)" style="margin-left: 5px;">
<el-button slot="reference" size="small" type="danger">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!-- 新增和查询的表单，默认不可见 -->
<el-dialog title="提示" :visible.sync="centerDialogVisible" :modal-append-to-body="false" width="30%" center>
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
<el-form-item label="账号" prop="no">
<el-col :span="20">
<el-input v-model="form.no"></el-input>
</el-col>
</el-form-item>
<el-form-item label="名字" prop="name">
<el-col :span="20">
<el-input v-model="form.name"></el-input>
</el-col>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-col :span="20">
<el-input v-model="form.password"></el-input>
</el-col>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-col :span="20">
<el-input v-model="form.age"></el-input>
</el-col>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.sex">
<el-radio label="男">男</el-radio>
<el-radio label="女">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-col :span="20">
<el-input v-model="form.phone"></el-input>
</el-col>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="concel">取 消</el-button>
<el-button type="primary" @click="doSave">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "UserManage",
data() {
return {
tableData: [],
name: '',
centerDialogVisible: false,
form: {
no: '',
name: '',
password: '',
age: '',
sex: '0',
phone: ''
},
rules: {
},
}
},
methods: {
resetting() {
this.name = "",
this.form.no = "",
this.form.name = "",
this.form.password = "",
this.form.age = "",
this.form.sex = "",
this.form.phone = ""
},
concel() {
this.centerDialogVisible = false
this.resetting()
},
//保存
save() {
this.$http.post(this.$httpUrl + '/api/user/save', {
no: this.form.no,
name: this.form.name,
password: this.form.password,
age: this.form.age,
sex: this.form.sex,
phone: this.form.phone
}).then(response => response.data).then((response) => {
console.log(response)
if (response.code == 200) {
this.centerDialogVisible = false;
this.resetting()
this.loadPost()
}
else {
this.$message.error('操作失败');
}
})
},
//修改
doMod(no) {
console.log(no)
console.log(this.form.name)
this.$http.post(this.$httpUrl + '/api/user/mod', {
no: this.form.no,
name: this.form.name,
password: this.form.password,
age: this.form.age,
sex: this.form.sex,
phone: this.form.phone
}).then(response => response.data).then((response) => {
console.log(response)
if (response.code == 200) {
this.$message({
message: '操作成功',
type: 'success'
});
this.centerDialogVisible = false;
this.resetting()
this.loadPost()
}
else {
this.$message.error('操作失败');
}
})
},
//修改
mod(row) {
console.log(row)
this.centerDialogVisible = true
this.$nextTick(() => {
//赋值到表单
this.form.no = row.u_no
this.form.name = row.u_name
this.form.password = ''
this.form.age = row.u_age
this.form.sex = row.u_sex
this.form.phone = row.u_phone
})
},
//自动判断
doSave() {
if (!this.doMod()) {
this.save();
} else {
console.log('error submit!!');
return false;
}
},
//删除
del(u_no) {
console.log(u_no)
this.$http.post(this.$httpUrl + '/api/user/del', {
no: u_no
}).then(response => response.data).then((response) => {
console.log(response)
if (response.code == 200) {
this.$message({
message: '删除信息成功',
type: 'success'
});
this.loadPost()
}
else {
this.$message.error('删除信息失败');
}
})
},
//查询所有
loadPost() {
this.$http.post(this.$httpUrl + '/api/user/all', {
}).then(response => response.data).then((response) => {
console.log(response)
if (response.code == 200) {
this.tableData = response.data
}
else {
alert('获取数据失败')
}
})
},
//搜索姓名
searchByName() {
console.log(this.name)
this.$http.post(this.$httpUrl + '/api/user/userName', {
name: this.name
}).then(response => response.data).then((response) => {
console.log(response)
if (response.data == "") {
this.$message.error('未查询到数据，请重新输入');
this.loadPost()
}
else {
this.$message({
message: '已成功查询',
type: 'success'
});
}
if (response.code == 200) {
this.tableData = response.data
}
else {
alert('获取数据失败')
}
})
}
},
//在组件被挂载之前调用
beforeMount() {
//this.loadGet();
this.loadPost()
}
}
</script>
<style scoped></style>
界面展示
扫一扫
3935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
