JavaScript基础学习——Express框架⼀、Express框架介绍
Express属于依赖于Node.js的⼀个后台框架。
基于 Node.js 平台，快速、开放、极简的 Web 开发框架。
学习Express框架的⽬的：
（1）如何快速构建后台。
（2）获取前端的请求。
（3）获取前端发送过来的数据。
（4）快速连接数据库。
（5）在后台处理相关数据。
（6）将处理的结果发向前端。
⼆、Express框架官⽹
（1）安装express：cnpm i express -g
（2）安装⽣成器（⽤来构建后台项⽬）：cnpm i express-generator -g
注意：测试安装是否成功：express --version
如果显⽰的有版本号，表⽰安装成功。
四、搭建后台项⽬环境
express 项⽬名
或：
express --view=ejs 项⽬名
--view=ejs表⽰使⽤的模板引擎是ejs，如果不设置默认为模板引擎为jade。
例：
（1）⽣成项⽬
express --view=ejs myproj
（2）切换⽬录（进⼊到⽣成的项⽬⽬录中），安装依赖包
cd myproj && npm i
（3）在app.js⽂件的倒数第⼆⾏添加设置监听端⼝的代码：
app.listen(80,() => {
console.log('服务器已启动！');
})
（4）启动项⽬
node app
五、项⽬⽬录
bin：存放启动项⽬的脚本⽂件，默认为www
node_modules：存放所有的项⽬依赖库
body-parser；⽤于解析客户端请求的body中的内容，内部使⽤JSON编码处理、url编码处理以及对于⽂件的上传处理cookie-parser：中间件⽤于获取web浏览器发送的cookie的内容
debug：⼩的调试⼯具，输出的是开发者⾃⼰在控制台输出的信息
ejs：⼀个⾼性能的模板引擎，它是⽤JS实现的，并且可以供Node.js使⽤（相当于在HTML中可以实现逻辑的书写）morgan：输出Node.js服务器接收到的请求的信息
public：静态资源⽂件，也是我们的⼯作⽬录
routes：进⾏路由设置的⽂件，相当于MVC中的Controller（控制器）
views：存放模板引擎⽂件，相当于MVC中的View（视图）
app.js：项⽬的⼊⼝⽂件，也是应⽤核⼼配置⽂件
package.json：项⽬依赖配置及开发者信息
package-lock.json：⽤以记录当前状态下实际安装的各个依赖包的具体来源和版本号，⽤来锁定安装
时包的版本号六、request请求对象
⽤于获取前端发送过来的数据。
先写前端页⾯
login.html
<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>login</title>
</head>
<body>
<form action="">
<p>⽤户名:<input type="text" name="username"></p>
<p>密码: <input type="text" name="userpassword"></p>
<input type="button" value="登录">
</form>
</body>
<script src="cdn.bootcdn/ajax/libs/jquery/3.5.1/jquery.js"></script> <script>
$('input[type=button]').click(() => {
$.ajax({
type: 'get',
// type: 'post',
url: 'localhost:81/login',
data: {
usr: $('input').eq(0).val(),
pwd: $('input').eq(1).val()
}
}).then(res => {
// console.log(res);
if (res == 'ok') {
alert("success")
setTimeout(() => {
location.href = "index.html"
},1000);
} else {
alert('wrong')
//清空数据
$('input').eq(0).val(''),
$('input').eq(1).val('')
//焦点落在第⼀个⽂本框
$('input').eq(0).focus();
}
})
})
</script>
</html>
index.html
<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>我的⽹站</title>
</head>
<body>
正在建设中
</body>
<script>
</script>
</html>
在app.js倒数第⼆⾏添加
app.listen(81,()=>{
console.log("服务器已启动");
})
（1）获取前端通过get发送过来的数据：req.query.变量;
将这段代码删除
/* GET home page. */
<('/', function(req, res, next) {
});
在index.js中添加
//解决跨域
/*
all：表⽰响应任意请求，包括get，post
*：表⽰所有路由
res.header()：表⽰设置响应头
Access-Control-Allow-Origin：表⽰跨域
'Access-Control-Allow-Origin','*':*表⽰任意IP，表⽰下⾯所有的响应⽀持任意IP
next()：必须要有的，表⽰这个中间件执⾏完后，继续执⾏下⾯的代码
router.all()必须写在所有路由的前⾯
*/
router.all('*', (req, res, next) => {
res.header('Access-Control-Allow-Origin', '*')
next()
})
//get请求
<('/login', (req, res, next) => {
//req.query是⽤在get请求当中，获取前端传来的值
let usr = req.query.usr//获取前端通过get发送过来的数据
let pwd = req.query.pwd
console.log(usr, pwd);
if (usr == 'admin' && pwd == "123456") {
res.send('ok')//将字符串ok发向前端
} else {
res.send('error')
}
})
在cmd中输⼊ node app，打开login.html页⾯测试即可
（2）获取前端通过post发送过来的数据：req.body.变量;
post也很简单，修改⼀下即可，别忘了前端代码的type处，也要修改成post
//post请求
router.post('/login', (req, res, next) => {
/
/req.query是⽤在get请求当中，获取前端传来的值
let usr = req.body.usr//获取前端通过get发送过来的数据
let pwd = req.body.pwd
console.log(usr, pwd);
if (usr == 'admin' && pwd == "123456") {
res.send('ok')//将字符串ok发向前端
} else {
res.send('error')
}
})
（3）获取前端通过get/post发送过来的数据

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。