web前端全系列 教程
1839个小节阅读:2242.8k
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
index.html
xxxxxxxxxx
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 40%;
margin: 0 auto
}
.uploadCon {
width: 150px;
height: 150px;
margin: 15px auto;
text-align: center;
position: relative;
}
.uploadCon input {
width: 100%;
height: 100%;
border-radius: 50%;
background: #b6b3b35c;
position: absolute;
left: 0;
top: 0;
font-size: 0px;
outline: none;
}
.uploadCon p {
position: absolute;
left: 42px;
top: 42px;
z-index: -1
}
.uploadCon img {
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: -1;
}
form {
text-align: center;
position: relative;
left: -30px
}
form input {
margin-bottom: 15px;
}
form label {
display: inline-block;
width: 80px;
text-align: right;
}
.result {
margin: 50px;
padding: 20px;
border: 1px solid
}
.opera {
margin: 15px 60px
}
table {
width: 100%;
text-align: center;
}
table th,
table td {
padding: 10px;
}
table img {
width: 80px;
}
</style>
</head>
<body>
<div class="container">
<h3>填写用户信息</h3>
<div class="uploadCon">
<input type="file" name="file" onchange="onUpload()">
<p>上传头像</p>
</div>
<form>
<label for="">用户名:</label><input type="text" name="name"><br>
<label for="">账号:</label><input type="text" name="account"><br>
<input type="hidden" name="id">
<label></label>
<button onclick="onSave()">提交</button>
<button onclick="document.querySelector('form').reset()">重置</button>
</form>
<div class="result">
<div class="opera">
<input type="text" placeholder="请输入要搜索的用户名" id="name">
<button onclick="onGetList()">搜索</button>
</div>
<table>
<thead>
<th>头像</th>
<th>用户名</th>
<th>操作</th>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<script src=
"./fetch.js"></script>
<script>
var fileUrl = ''
// 插入图片
var appendImg = function () {
var img = new Image()
img.src = fileUrl
// 判断图片是否已经存在
if (document.querySelector('.uploadCon img')) {
document.querySelector('.uploadCon img').remove()
}
document.querySelector('[name="file"]').after(img)
}
// 上传头像
var onUpload = function () {
// 获取上传的文件
var file = document.querySelector('[name="file"]').files[0]
var formData = new FormData()
formData.append('file', file)
myFetch.post('/upload', formData).then(function (data) {
fileUrl = data.file.url
appendImg()
})
}
// 提交form表单
var onSave = function () {
// 获取form表单数据
var name = document.querySelector('[name="name"]').value
var account = document.querySelector('[name="account"]').value
var id = document.querySelector('[name="id"]').value
if (id) {
// 发送修改的网络请求
myFetch.post('/user/update', { name: name, account: account, file: fileUrl ,id:id}, {
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
}).then(function (data) {
onGetList()
})
return
}
// 新增
myFetch.post('/user/add', { name: name, account: account, file: fileUrl }, {
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
}).then(function (data) {
onGetList()
})
}
// 获取用户数据
var onGetList = function () {
// 获取tbody
var tbody = document.querySelector('tbody')
// 获取要搜索的用户名
var name = document.querySelector('#name').value
myFetch.get('/user/list?name=' + name).then(function (data) {
tbody.innerHTML = null
console.log(data)
var records = data.records
records.forEach(function (item) {
var tr = document.createElement('tr')
var td = document.createElement('td')
var img = new Image()
img.src = item.file
var imgTd = td.cloneNode()
imgTd.append(img)
tr.append(imgTd)
var nameTd = td.cloneNode()
nameTd.innerHTML = item.name
tr.append(nameTd)
var operaTd = td.cloneNode()
var button1 = document.createElement('button')
var button2 = document.createElement('button')
button1.innerHTML = '删除'
button2.innerHTML = '编辑'
button1.onclick = function () {
onRemove(item)
}
button2.onclick = function () {
onEdit(item)
}
operaTd.append(button1)
operaTd.append(button2)
tr.append(operaTd)
tbody.append(tr)
})
})
}
// 删除用户
var onRemove = function (item) {
myFetch.post('/user/remove', { id: item.id }, {
headers: {
"Content-Type": "application/json"
}
}).then(function (data) {
onGetList()
})
}
// 编辑用户数据
var onEdit = function (item) {
document.querySelector('[name="name"]').value = item.name
document.querySelector('[name="account"]').value = item.account
document.querySelector('[name="id"]').value = item.id
fileUrl = item.file
appendImg()
}
window.onload = function () {
onGetList()
}
</script>
</body>
</html>
fetch.js
xxxxxxxxxx
var doFetch = function (url, options) {
return new Promise(function (resolve, reject) {
fetch(url, options).then(function (res) {
//如果请求成功,则返回响应体
res.json().then(function (data) {
resolve(data)
})
}).catch(function (e) {
reject(e)
})
})
}
var myFetch = {
get: function (url, options) {
return doFetch(url, options)
},
post: function (url, params, options = {}) {
// 请求体类型为multipart/form-data
let body = params
var headers = options.headers || {}
var contentType = headers['Content-Type']
// 请求体类型是否为form表单类型
if (contentType == 'application/x-www-form-urlencoded') {
body = ''
for ([key, value] of Object.entries(params)) {
body += `${key}=${value}&`
}
}else if(contentType=='application/json'){
//如果请求体类型为json
body=JSON.stringify(params)
}
return doFetch(url,{
method:'POST',
body:body,
headers:{
headers
}
})
}
}
index.js
xxxxxxxxxx
const express=require('express')
const app=express()
const upload=require('./routes/upload')
const user=require('./routes/user')
const bodyParser=require('body-parser')
// 托管静态资源
app.use(express.static('../Express应用'))
app.use(bodyParser.urlencoded({extended:true}))
app.use(bodyParser.json())
//挂载路由模块
app.use('/upload',upload)
app.use('/user',user)
// 自定义错误处理器
app.use(function(err,req,res,next){
console.log(err.stack)
res.status(500).send('服务器报错了')
})
// 启动服务器
app.listen(3000,function(){
console.log('服务器正在监听3000端口')
})
mysql.js
xxxxxxxxxx
const mysql=require('mysql')
const connection=mysql.createConnection({
host:'localhost',
user:'root',
password:'',
database:'expressapply'
})
const sqlFn=function(sql,arr,callback){
connection.query(sql,arr,callback)
}
module.exports=sqlFn
routes/upload.js
xxxxxxxxxx
const express=require('express')
const router=express.Router()
const multer=require('multer')
const storage=multer.diskStorage({
destination:function(req,file,cb){
cb(null,'files')
},
filename:function(req,file,cb){
cb(null,Date.now()+'_'+file.originalname)
}
})
router.use(multer({storage:storage}).single('file'))
router.post('',function(req,res,next){
console.log(req.file)
res.send({code:0,file:{url:req.file.path}})
})
module.exports=router
routes/user.js
xxxxxxxxxx
const express = require('express')
const router = express.Router()
const sqlFn = require('../mysql')
// 新增的处理
router.post('/add', function (req, res, next) {
console.log(req.body)
const { name, account, file } = req.body
sqlFn('insert into user values (null,?,?,?)', [name, account, file], (err, results) => {
if (err) {
return next(err)
}
if (results.affectedRows) {
res.send({ code: 0, message: '成功' })
}
})
})
// 获取用户数据处理
router.get('/list', function (req, res, next) {
const { query } = req
sqlFn(`select * from user where ${query.name ? 'name=?' : 'name is not null'}`, query.name, (err, results) => {
if (err) {
return next(err)
}
res.send({ code: 0, records: results })
})
})
// 删除用户请求处理
router.post('/remove',function(req,res,next){
sqlFn('delete from user where id=?',[req.body.id],(err,results)=>{
if(err){
return next(err)
}
if(results.affectedRows){
res.send({code:0,message:'成功'})
}
})
})
// 修改用户请求处理
router.post('/update',function(req,res,next){
const { name, account, file,id } = req.body
sqlFn('update user set name=?,account=?,file=? where id=?',[name, account, file,id],(err,results)=>{
if(err){
return next(err)
}
if(results.affectedRows){
res.send({code:0,message:'成功'})
}
})
})
module.exports = router