创建服务器 express ，mongodb实现表格增删改查
Long Time No See
废话不多说，直接开整
前提是 Vscode 软件
1、首先，建立一个文件夹
2、然后，在文件夹里创建一个 public 文件夹，此文件夹用来放置静态文件
3、在静态文件夹里创建静态资源
4、静态资源创建完毕后，右键创建的第一个文件夹，在集成终端中打开
ps:集成终端为 node.js
5、在打开的集成终端中，输入 npm init -y +回车 创建 json 文件
6、再输入 npm install express mongoose -S 安装 express 和 mongoose
7、安装完成之后，在刚开始创立的文件夹下创建一个 服务器 ，一般命名为qpi.js，然后就可以开始敲代码了
服务器代码
JavaScript连接服务器代码
html代码
Css代码
顺序
一、首先写出接口文档，比如这个
一、静态资源发布 。http://127.0.0.1:4399 返回 index.html
二、接口文档
1、添加商品
接口地址：/addgoods
请求方式：POST
上传数据：imgsrc 图片地址、msg 简介、price 价格、 type 类别（1，2，3）
返回响应：
成功：{
"err_code":"添加成功"}
失败：{
"err_code":"no"}
2、返回所有商品
接口地址：/allgoods
请求方式：GET
上传数据：
返回响应：
成功：{
"err_code":"显示成功","info":[]}
失败：{
"err_code":"no"}
3、删除商品
接口地址：/delone
请求方式：GET
上传数据：id 商品唯一id
返回响应：
成功：{
"err_code":"删除成功"}
失败：{
"err_code":"no"}
4、修改-通过id 查询 修改的商品数据
接口地址：/findone
请求方式：GET
上传数据：id 商品唯一id
返回响应：
成功：{
"err_code":"查找成功","info":{
}}
失败：{
"err_code":"no"}
5、修改
接口地址：/editgoods
请求方式：POST
上传数据： id: imgsrc 图片地址、msg 简介、price 价格、 type 类别（1，2，3）
返回响应：
成功：{
"err_code":"修改成功"}
失败：{
"err_code":"no"}
二、创建服务器，并写出接口
服务器代码
三、链接服务器
JavaScript链接服务器
回到顶部
html代码
<div class="div">
<h1>商品后台管理系统h1>
<form>
<label for="imgsrc">图片地址label>
<input type="text" id="imgsrc">
<label for="msg">简介label>
<input type="text" id="msg">
<label for="price">价格label>
<input type="text" id="price">
<select name="" id="type">
<option value="1">电脑option>
<option value="2">冰箱option>
<option value="3">手机option>
select>
<input type="button" value="添加" id="add" name=""/>
<input type="text" name="" id="_id"/>
<input type="button" name="" id="edit" value="确认修改"/>
form>
<table>
<thead>
<tr>
<th>图片th>
<th>简介th>
<th>价格th>
<th>类别th>
<th>操作th>
tr>
thead>
<tbody id="tbody">
tbody>
table>
div>
回到顶部
Css样式代码
.div{
width: 100vw;
}
h1{
text-align: center;
}
table,th,td{
border: 1px solid blue;
border-collapse: collapse;
}
table{
table-layout: auto;
}
#tbody span{
cursor: pointer;
}
table{
width: 80vw;
}
table img{
width: 50px;
height: 50px;
}
#_id,#edit{
display: none;
}
回到顶部
JavaScript代码
//添加
var add=document.getElementById( "add" );
add.onclick=function(){
var imgsrc=document.getElementById( "imgsrc" ).value;
var msg=document.getElementById( "msg" ).value;
var price=document.getElementById( "price" ).value;
var type=document.getElementById( "type" ).value;
var xhr=new XMLHttpRequest();
xhr.open( "POST","/addgoods",true );
xhr.setRequestHeader( "Content-type","application/x-www-form-urlencoded" )
xhr.send( `imgsrc=${
imgsrc }&msg=${
msg }&price=${
price }&type=${
type }` )
xhr.onreadystatechange=function(){
if( xhr.readyState==4 && xhr.status==200 ){
xhr.responseText;
let obj=JSON.parse( xhr.responseText );
if( obj.err_code=="添加成功" ){
//==展示表格，稍后再议
shows()
}else{
alert( "添加失败" )
}
}
}
}
var Arr=[ "电脑","冰箱","手机" ]
//渲染2--1
function showTr( obj ){
var tr="";
for( let i in obj.info ){
tr+=`
${
obj.info[i].imgsrc }" alt=""/>
${
obj.info[i].msg }
${
obj.info[i].price }
${
Arr[ obj.info[i].type-1 ] }
${
obj.info[i]._id }' )">修改
${
obj.info[i]._id }' )">删除
`
}
document.getElementById( "tbody" ).innerHTML=tr
}
//显示再表格中2--2
function shows(){
var xhr=new XMLHttpRequest();
xhr.open( "GET","/allgoods",true )
xhr.send();
xhr.onreadystatechange=function(){
if( xhr.readyState==4 && xhr.status==200 ){
let obj=JSON.parse( xhr.responseText );
if( obj.err_code=="显示成功" ){
showTr( obj );
}else{
alert( "服务器没了" )
}
}
}
}
window.onload=function(){
shows()
}
//3、删除商品
function del( id ){
var xhr=new XMLHttpRequest();
xhr.open( "GET",`/delone?id=${
id }`,true )
xhr.send();
xhr.onreadystatechange=function(){
if( xhr.readyState==4 && xhr.status==200 ){
let obj=JSON.parse( xhr.responseText )
if( obj.err_code=="删除成功" ){
shows()
}else{
alert( "删除失败" )
}
}
}
}
//4、修改
//4-1、根据id查找
function change( id ){
//点击修改时，确认修改显示，添加隐藏
document.getElementById( "edit" ).style.display="block";
document.getElementById( "add" ).style.display="none"
var xhr=new XMLHttpRequest();
xhr.open( "GET",`/findone?id=${
id }`,true )
xhr.send()
xhr.onreadystatechange=function(){
if( xhr.readyState==4 && xhr.status==200 ){
let obj=JSON.parse( xhr.responseText )
if( obj.err_code=="查找成功" ){
//将值返回到表单中
document.getElementById( "_id" ).value=obj.info._id
document.getElementById( "imgsrc" ).value=obj.info.imgsrc;
document.getElementById( "msg" ).value=obj.info.msg
document.getElementById( "price" ).value=obj.info.price
document.getElementById( "type" ).value=obj.info.type
}else{
alert( "就这？" )
}
}
}
}
//4-2、确认修改
var edit=document.getElementById( "edit" )
edit.onclick=function(){
//点击确认修改时，隐藏该按钮，添加按钮再显示
document.getElementById( "edit" ).style.display="none";
document.getElementById( "add" ).style.display="block"
//获取返回表单的值
var id=document.getElementById( "_id" ).value
var imgsrc=document.getElementById( "imgsrc" ).value
var msg=document.getElementById( "msg" ).value
var price=document.getElementById( "price" ).value
var type=document.getElementById( "type" ).value
var xhr=new XMLHttpRequest();
xhr.open( "POST","/editgoods",true )
xhr.setRequestHeader( "Content-type","application/x-www-form-urlencoded" )
xhr.send( `id=${
id }&imgsrc=${
imgsrc }&msg=${
msg }&price=${
price }&type=${
type }` )
xhr.onreadystatechange=function(){
if( xhr.readyState==4 && xhr.status==200 ){
let obj=JSON.parse( xhr.responseText );
if( obj.err_code=="修改成功" ){
shows()
}else{
alert( "快改！" )
}
}
}
}
回到顶部
## 服务器代码//载入 rxpress 模块，创建服务器
const express=require("express");
const app=express();
//静态资源
app.use( express.static( "public" ) );
//加入 POST 必备两句话
app.use( express.json() );
app.use( express.urlencoded( {
extended:true } ) );
//载入 mongoose 模块
const mongoose=require("mongoose");
//连接数据库
mongoose.connect( "mongodb://127.0.0.1:27017/myJd",{
useUnifiedTopology: true,useNewUrlParser: true } )
//创建 骨架
let Schema=new mongoose.Schema( {
"imgsrc":String,
"msg":String,
"price":Number,
"type":String
} )
//生成 集合以及数据模型
let datasModel=mongoose.model( "datas",Schema );
//添加商品
app.post( "/addgoods",function( req,res ){
let imgsrc=req.body.imgsrc;
let msg=req.body.msg;
let price=req.body.price;
let type=req.body.type;
datasModel.create( {
"imgsrc":imgsrc,
"msg":msg,
"price":price,
"type":type
},function( err ){
if( err ){
res.send( {
"err_code":"添加失败" } )
}else{
res.send( {
"err_code":"添加成功" } )
}
} )
} )
//显示所有商品
app.get( "/allgoods",function( req,res ){
datasModel.find( {
},function( err,data ){
if( err ){
res.send( {
"err_code":"溜了溜了" } )
}else{
res.send( {
"err_code":"显示成功","info":data } )
}
} )
} )
//删除商品
app.get( "/delone",function( req,res ){
let id=req.query.id
datasModel.deleteOne( {
"_id":id },function( err ){
if( err ){
res.send( {
"err_code":"爷错了，快改" } )
}else{
res.send( {
"err_code":"删除成功" } )
}
} )
} )
//修改
//1、通过id 查询需要修改的数据
app.get( "/findone",function( req,res ){
const id=req.query.id;
datasModel.findOne( {
"_id":id },function( err,data ){
if( err ){
res.send( {
"err_code":"爷又错了！快改！" } )
}else{
res.send( {
"err_code":"查找成功","info":data } )
}
} )
} )
//2、修改==
app.post( "/editgoods",function( req,res ){
let id=req.body.id;
let imgsrc=req.body.imgsrc;
let msg=req.body.msg;
let price=req.body.price;
let type=req.body.type;
datasModel.updateOne( {
"_id":id },{
$set:{
"imgsrc":imgsrc,
"msg":msg,
"price":price,
"type":type
} },function( err ){
if( err ){
res.send( {
"err_code":"哎！又错了！" } )
}else{
res.send( {
"err_code":"修改成功" } )
}
} )
} )
app.listen( 4399 )
回到顶部
，搞定，今天的分享也结束了
我后天会稍微介绍一下 node 和 express
大家拜拜~~