功能:定义用户对象模型
var
mongoose=require('mongoose'),
Schema=mongoose.Schema
var
UserSchema=new
Schema({
username:{type:String,unique:true},
email:String,
color:String,
hashed_password:String
})
mongoose.model('User',UserSchema)
二、users_controller.js
功能:为Express服务器实现删除用户路由
var
crypto=require('crypto')
var
mongoose=require('mongoose'),User=mongoose.model('User')
function
hashPW(pwd){
return
crypto.createHash('sha256').update(pwd).
digest('base64').toString()
}
//实现删除用户路由
exports.deleteUser=function(req,res){
User.findOne({_id:req.session.user})
.exec(function(err,user){
if(user){
user.remove(function(err){
if(err){
req.session.msg=err
}
req.session.destroy(function(){
res.redirect('/login')
})
})
}else{
req.session.msg="User
Not
Found!"
req.session.destroy(function(){
res.redirect('/login')
})
}
})
}
三、user.html
<!DOCTYPE
html>
<html
ng-app="myApp">
<head>
<meta
charset="UTF-8">
<title>用户修改</title>
<link
rel="stylesheet"type="text/css"
href="/static/css/styles.css"
rel="external
nofollow"
/>
<script
src="https://cdn.staticfile.org/angular.js/1.5.8/angular.min.js"></script>
<script
src="/static/js/my_app.js"></script>
</head>
<body>
<div
class="form-container"
ng-controller="myController">
<p
class="form-header">用户修改</p>
<form
method="POST"
action="/user/update">
<label>用户名:</label>
<input
type="text"
name="username"
ng-model="user.username"
disabled><br>
<label>Email:</label>
<input
type="email"
name="email"
ng-model="user.email"><br>
<label>肤色:</label>
<input
type="text"
name="color"
ng-model="user.color"><br>
<input
type="submit"
value="Save">
</form>
</div>
<form
method="POST"
action="/user/delete">
<input
type="submit"
value="删除用户">
</form>
<hr><%=msg%>
<hr>{{error}}
</body>
</html>
四、routes.js
功能:为Express服务器实现处理Web请求路由
var
crypto=require('crypto')
var
express=require('express')
module.exports=function(app){
var
users=require('./controllers/users_controller')
app.use('/static',express.static('./static')).
use('/lib',express.static('../lib')
)
app.post('/user/delete',users.deleteUser)
五、页面显示效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:JavaScript中使用Substring删除字符串最后一个字符javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】JS实现数组删除指定元素功能示例JavaScript怎样在删除前添加确认弹出框?PHP
结合
Boostrap
结合
js
实现学生列表删除编辑及搜索功能原生JS实现动态添加新元素、删除元素方法JS删除String里某个字符的方法
原生模式就是使用原生的html、css、js书写代码，它可以与所有浏览器、系统完美兼容，但开发效率较低；无框架模式是利用路由、mvvm、模版引擎以及工具，大大提高代码的开发效率，复杂度也更高，但不能完美兼容所有的平台。相信大家在做项目的时候，肯定会遇到这样的问题：我点击新增按钮，需要弹出个弹框，然后我点击对应的关闭按钮，关闭弹框，但是新增按钮和关闭按钮操作的是另一个元素，所以需要获取dom元素进行操控，那么在vue中怎么操作dom呢？
以下是常用的三种方法：
1、jQuery操作dom（推荐指数：★☆☆☆☆）：
只要拿jQuery的选择器，选中相应的dom进行操作就可以了，但是大家都知道jQuery获取元素是查找页面所有，相当于“循环”所有元素直至找到需要的dom，但是vue是单页面的，jQuery获取dom并不只是获取vue当前页面，而是从根路由开始查找所有，当其他页面出现相同的元素，也会被获取到，而且jQuery操作的dom，如果是根据动态获取数据渲染的，那么写在mounted里的操作方法将会失效，必须放到updated里，这样会导致有些操作被执行多遍，所以还是 不建议 在vue中使用jQuery。
2、原生js操作dom（推荐指数：★★★★☆）：
原生js获取dom就很简单了，例如：根据id、class、当前元素的上一个元素......
3、vue官方方法：ref（推荐指数：★★★★★）：
vue中的ref是把当前dom元素 “ 抽离出来 ” ，只要通过 this.$refs就可以获取到（注意this指向），此方法尤其适用于父元素需要操作子组件的dom元素，这也是子传父传递数据的一种方法
下面让我来看个案例：
设置了一个button按钮，通过点击事件，然后弹出 新增的弹框 , 然后点击 “ × ”的button按钮，关闭弹框，此时需要操作弹框的dom元素，通过ref定义一个名字， 然后在方法中通过 this.$refs.名字 获取对应的dom
