# Students-system开发步骤
## 项目初始化
新建文件夹，命名为`students-system`，注意这里的命名不得为中文或其他特殊字符
```shell
npm init -y
```
## 安装包
```shell
npm i jquery express express-art-template
```
## 新建文件夹
新建public，views文件夹，public下新建img，js，css文件夹，目录如下：
```
student-system
node_modules
public
img
css
js
views
package.json
...
```
## 新建服务
在students-system文件夹下新建`server.js`
```js
const express=require('express')
const app = express()
//配置express-art-template，才可以render html
app.engine('html',require('express-art-template'))
app.get('/',(req,res) =>{
res.render('login.html')
})
app.listen(3000,() => console.log('app listening on http://localhost:3000 '))
```
当用户get / 时，就会渲染login.html
开通了3000端口号。
> ip地址是链接到网络上的某台计算机
>
> 端口号是识别到该计算机上的某个软件
## 新建页面
在`views`文件夹下，新建`login.html`
```html
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input[type="email"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
display: block;
width: 100%;
padding: 10px;
background-color: #4caf50;
color: #ffffff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.text-center {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Login</h1>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="text-center">
<button type="submit">Login</button>
</div>
</form>
</div>
</body>
</html>
```
此时，用户在浏览器进入 [Login](http://localhost:3000/)即可打开我们的登录界面。
## 登录功能开发
### 传统的表单登录
表单登录，需要在form表单里，指定action和method，action是路径，method是方法，方法一般分为get和post
get用于保密级别低，长度短的信息（get会把请求写道url里面，受到url长度影响，信息的长度不能无限长）
post用于保密级别高（比如密码等），长度长的信息
> 表单登录，一定伴随着整个页面的重新跳转或刷新
在login.html，为表单指定路径和方法
```html
<form action='/login' method='post'>
·······
</form>
```
在后端server.js 里配置相应请求信息
```js
app.post('/login',(req,res) =>{
console.log(req.body)
if (req.body.email==='[email protected]'&&req.body.password==='admin'){
res.render('main.html')
}else{
res.render('error.html')
}
})
```
如果想要在后端使用req.body来获取post来的信息，比如在后端配置body-parser，现在新版本的express已经内置了body-parser，不需要额外安装，直接配置即可
```js
//配置body-parser
app.use(express.urlencoded({ extended:false}))
app.use(express.json())
```
如此，当用户输入正确账号和密码时，就可以跳转到main.html，如果错误账号或密码，则会跳转到error.html
error.html里可以配置错误信息，并且几秒后跳转回登录界面
### ajax局部刷新登录
由于表单登录，伴随着整个页面的刷新，带来白屏问题，等待，跳转等问题，非常不方便，而且提示信息是在错误页面上需要跳转来，跳转去
```html
<form>
·······
</form>
```
form表单里的action和method此时已经无用，删除掉
引入jQuery
```html
<script src="../node_modules/jquery/dist/jquery.js"></script>
```
打开localhost:3000发现，jQuery并没有被加载上，因为此时jQuery存在于服务器中的node_modules文件夹中，后端服务器的文件不允许前端随意查看，我们需要开放静态文件权限给前端，public和node_modulse两个文件夹
```js
/开放node_modules,public两个文件夹的权限，允许用户查看
app.use('/public', express.static('public'))
app.use('/bbb', express.static('node_modules'))
//前面的/aaa，/bbb是随便起名，可以对后端文件夹配置有一定的隐藏，防止被黑
```
此时，前端对于jQuery的引入，也可以改成下面形式，以隐藏真实后端文件夹目录
```html
<script src="/bbb/jquery/dist/jquery.js"></script>
```
配置前端jQuery ajax，向后端发起请求，如果账号密码正确，则跳转到新页面main.html，如果账号密码错误，则跳出提示
```html
<script>
$('form').on('submit', function(event){
event.preventDefault()//取消默认submit提交事件
$.ajax({
url:'/login',
method: 'POST',
data:{//向后端提交的数据
email: $('#email').val(),
password: $('#password').val()
},
success: function(data){//提交成功，要执行的函数，data就是后端回来的信息
console.log(data)
if (data.success){
window.location.href='/main.html'
}else{
alert('账号或密码错误')
}
},
error: function(){//如果受到网络原因或其他不确定因素的影响，导致请求失败执行的函数
console.log('Something went wrong')
}
})
})
</script>
```
后端对于post /login的请求修改如下：
```js
app.post('/login',(req,res) =>{
console.log(req.body)
if (req.body.email==='[email protected]'&&req.body.password==='admin'){
// res.render('main.html')
res.send({success:true})
}else{
res.send({success:false})
}
})
```
