![](https://img.haomeiwen.com/i20195020/7b1741751fa87e23.png)
database文件夹里面新建user文件夹,新建app.js文件
![](https://img.haomeiwen.com/i20195020/95ad5699bbabd5be.png)
新建服务器,监听并且响应。
![](https://img.haomeiwen.com/i20195020/08e9566f1195e6cb.png)
当前服务器启动成功
![](https://img.haomeiwen.com/i20195020/2f4eba96ee87f26c.png)
引入mongoose,连接数据库,如果连接成功返回then后面的
![](https://img.haomeiwen.com/i20195020/dcf2f05e47ae42d0.png)
数据库连接成功了
![](https://img.haomeiwen.com/i20195020/b5cc83a7abfe7ada.png)
这个参数添加不添加都无所谓,但是不想看到这个提示信息,所以把这个参数添加到connect的第二个参数里面。
![](https://img.haomeiwen.com/i20195020/e565823900f54544.png)
创建playground数据库
![](https://img.haomeiwen.com/i20195020/db68b63ab74591f0.png)
数据库连接成功,而且没有提示信息了
![](https://img.haomeiwen.com/i20195020/27b31b6e0fdcdf5a.png)
用mongoose。schema方法创建了集合规则,里面有name,age,password,email,hobbies。type,数据类型是string,require必须写的字段,minlength最小长度,maxlength最大长度。min数值最小范文,max:数值最大范围。hobbies是个数组,【】里面是string。说明里面都是字符串。
![](https://img.haomeiwen.com/i20195020/7003d5858309a903.png)
创建集合user,去找一个现有的集合导入到user中。
![](https://img.haomeiwen.com/i20195020/c84b426c4fc2fc88.png)
ls就可以查看当前database目录下的文件列表
![](https://img.haomeiwen.com/i20195020/96fc41a938a3f500.png)
mongimport -d导入到哪个数据库 -c 导入到哪个集合 -file 导入哪个文件
![](https://img.haomeiwen.com/i20195020/eae627e04d13e9f4.png)
连接了localhost
导入了6个文件,
![](https://img.haomeiwen.com/i20195020/d4d219aeed5dc9f5.png)
compass中多了一个playground的文件,里面有user文件,里面有导入的数据。
![](https://img.haomeiwen.com/i20195020/ea295ec659495fda.png)
实现路由功能,增加了4 5 6个点
![](https://img.haomeiwen.com/i20195020/fd806aecc2fb0d3e.png)
要弄地址,导入了url模块,14行
![](https://img.haomeiwen.com/i20195020/95b54a0fbd46dab6.png)
路由方式,要获得请求方式和请求地址,事先准备了list.htlm页面。这里要把访问的页面呈现出来,首先,method方法返回的两个值,get和post就是获得或者输出(添加数据,修改数据),if判断,如果method返回get,就让pathname地址给到list这个地址,就是网页呈现的地址。然后用一个变量list接受一个字符串‘’,括号里面是复制的我们编写的htlm码的所有复制代码,此处被折叠了。然后用res.end返回list变量,就根据用户的list地址访问到了我们写的htlm页面了。
![](https://img.haomeiwen.com/i20195020/712790a8fa25e88f.png)
55行 users集合的find方法去拿到之前传的用户里面的数据 await 就是异步函数里面才能用的 用一个变量users接收返回的信息
![](https://img.haomeiwen.com/i20195020/4186bc89cd83571c.png)
刷新这个
![](https://img.haomeiwen.com/i20195020/fa1f5488cca3c31f.png)
命令行中数据已经查询成功了,然后要将数据和htlm进行拼接。这时候,要把list的引号改为反引号,因为要进行拼接了!
![](https://img.haomeiwen.com/i20195020/9ce9588d03077c39.png)
数据库中有多少个数据,都要生成多少个tr,最后把数据写到td里面。先把不包括tr的上门那一堆代码重新复制粘贴到list反引号里面。
![](https://img.haomeiwen.com/i20195020/b146e30e46231cb3.png)
后面的用list+=··的方式来添加
![](https://img.haomeiwen.com/i20195020/d056c579791082cd.png)
从talbe这里复制
![](https://img.haomeiwen.com/i20195020/88cf3f0ea2b83abd.png)
粘贴到这里 而tr要在list和list+=之间拼接
![](https://img.haomeiwen.com/i20195020/d1e484526ebf0ed7.png)
就是这
![](https://img.haomeiwen.com/i20195020/d0c06a7ee0be69f1.png)
对users里面的数据进行循环操作,user里面都是一个个的用户信息数组,就是item,因此里面会有。name等属性 用${}拼接
![](https://img.haomeiwen.com/i20195020/98b89d5fb552b62a.png)
hobbies这块也是数组,所以要处理一下,所以又要用到循环,又得弄个list+=把下面td的内容填好,然后在中间再加内容
![](https://img.haomeiwen.com/i20195020/ea5e73d114e31c48.png)
又一个hobbies里面的foreach循环,然后把静态数据删除
![](https://img.haomeiwen.com/i20195020/30e99b20040a6498.png)
通过点击实现用户信息添加
![](https://img.haomeiwen.com/i20195020/2b0d1b004c12ad49.png)
提前准备了add.htlm放到let add里面,就是用add来接收addhtlm的代码值,看里面判断条件,if是list就去list那里,ifpathname是add就去add页面那里。
![](https://img.haomeiwen.com/i20195020/bf9d635032c16e69.png)
通过res.end(add)就把add给返回去了
![](https://img.haomeiwen.com/i20195020/40d91cfa2b22f2ba.png)
在浏览器中访问/add就进入了add页面
![](https://img.haomeiwen.com/i20195020/93b6ec903cc2814f.png)
122行代码 把form的 method指定为post
![](https://img.haomeiwen.com/i20195020/e0049e2ceb811214.png)
睁大眼睛看,这里要name改了,这就是为什么之前name属性是name了,因为name的名字就是为了和数据库里面的相一致,才能对应找到存储的地方。name=‘password’ name=‘email’
![](https://img.haomeiwen.com/i20195020/8dfd48ce7856a1b2.png)
hobbies这里所有复选框要编一个组。
![](https://img.haomeiwen.com/i20195020/4681791a789260ef.png)
牛逼了吧,所有都添加了一个同样的组,hobbies。
![](https://img.haomeiwen.com/i20195020/54978bd9ed33452f.png)
要弄post属性了,现在现在122行处添加一个action属性
![](https://img.haomeiwen.com/i20195020/ad3cf0050714f0a4.png)
那么当用户提交表单的时候,就找到post这里来了。
![](https://img.haomeiwen.com/i20195020/311e07c6a39719c4.png)
设置一个变量formdata来接收post的数据,data会不断的传,param就是传过来的值,fordata+=param,就可以把传来的值拼接,然后在end那里返回
![](https://img.haomeiwen.com/i20195020/8df3f990c0fa8829.png)
点一下添加用户
![](https://img.haomeiwen.com/i20195020/a606f51d14596c46.png)
参数接收成功了,但是我们要把他们转化成对象格式,引入querystring模块
![](https://img.haomeiwen.com/i20195020/c53ad109cd7d1b90.png)
186行 用querysting里面的parse方法转换formdata数据,输出看看
![](https://img.haomeiwen.com/i20195020/0ac45782a77ac924.png)
变成对象模式了
![](https://img.haomeiwen.com/i20195020/7b61bf8e7feb0e56.png)
这信息量太大了。第一,用user变量接受转换成的结果,就是上面的对象模式。然后调用user下面的create方法将数据添加到数据库中,刚好接受过了的user也是对象模式,所以就可以作为User。create的变量,await 同步函数,然后添加成功后res.end()让用户跳转到list地址上。res.writeHead是啥?最后要添加async ,因为await是必须出现在
![](https://img.haomeiwen.com/i20195020/5a888239375ab083.png)
添加成功了。
![](https://img.haomeiwen.com/i20195020/b2cda4739b72d553.png)
104行 增加了modify路由并且拿到了item_id
![](https://img.haomeiwen.com/i20195020/7778fee58de65429.png)
get里面添加modify路由,然后由于是和add路由的页面一样的,所以就去add路由里面把
![](https://img.haomeiwen.com/i20195020/fb76eceb7a024d05.png)
把这块复制,然后粘贴到modify下面,把
![](https://img.haomeiwen.com/i20195020/f8ea370a1614a7f8.png)
191 把添加用户改成修改用户
![](https://img.haomeiwen.com/i20195020/9b19ca4185f89250.png)
res.end改成modify
![](https://img.haomeiwen.com/i20195020/7c41aabcd7b15d35.png)
56行,添加了query参数,和true这样query就是对象类型,里面包含id属性,就可以获得修改的id
![](https://img.haomeiwen.com/i20195020/02074e058fcc773f.png)
180 用user去接受query的id,然后返回user看看有没有查找到
![](https://img.haomeiwen.com/i20195020/4ff4d55cd47ea1c3.png)
用户信息被查询到了
![](https://img.haomeiwen.com/i20195020/2a2953e506157aca.png)
180 改成findOne就可以找到一个对象,注意观察
![](https://img.haomeiwen.com/i20195020/028984438575a88d.png)
注意观察find是【{}】而findOne是{}
![](https://img.haomeiwen.com/i20195020/3be47ef986d9b8fd.png)
然后拼接进去,用value值
![](https://img.haomeiwen.com/i20195020/ffddb9749b4366c2.png)
声明一个爱好数组,把所有的爱好都写进去
![](https://img.haomeiwen.com/i20195020/b2b276aa5fa9ac43.png)
然后又是拼接和遍历,用include属性看看里面有没有,有的话就把lable标签放进去,记住之前的lable标签都删掉了,现在是动态的生成lable标签,然后,把lable里面的input里面的check属性改为checked,说明只要里面include爱好了,就把选项改为勾选状态。
![](https://img.haomeiwen.com/i20195020/b570149ceb20239c.png)
else的话就把checked属性去掉
![](https://img.haomeiwen.com/i20195020/4b8d47b4955c7b1b.png)
把input的value值改成当前的循环项
![](https://img.haomeiwen.com/i20195020/5f0bee2bf547038e.png)
14 15 16
![](https://img.haomeiwen.com/i20195020/7256971d85f77657.png)
197行 action改成modify
![](https://img.haomeiwen.com/i20195020/668b88c11f96a6e0.png)
把add的时候编号的代码整体复制到modify那里,然后改一下
![](https://img.haomeiwen.com/i20195020/8ec83859cde1ac36.png)
把creat方法改成updataOne
![](https://img.haomeiwen.com/i20195020/27d2a00d5841224f.png)
197 拿到modify的id
![](https://img.haomeiwen.com/i20195020/e9c3c324d084fbaa.png)
修改成功
![](https://img.haomeiwen.com/i20195020/5f42c0003419c315.png)
105 建设一个remove路由
![](https://img.haomeiwen.com/i20195020/8e85641e1f0e8bdc.png)
1、为删除按钮添加链接以及请求参数 2、获得id,然后remove id的选项,返回list页
![](https://img.haomeiwen.com/i20195020/981409596a86d023.png)
模块分离,先把数据库的拿出来 user--module里面index。js
![](https://img.haomeiwen.com/i20195020/26a6ed73e51fc24e.png)
app.js在require回来这些拿出去的文件
后面用模板引擎来解决字符串拼接
网友评论