node模板引擎-stufilesManangement

news/2024/11/10 1:48:03 
// stu/app.js
// 流程
// 1.建立项目文件夹并生成项目描述文件
//    students->npm init -y ->生成package.json文件
//    students->创建app.js
// 2.创建网站服务器实现客户端和服务器端的通信
// 3.连接数据库并根据需求设计学员信息表
// 4.创建路由并实现页面模板呈递
// 5.实现静态资源访问
// 6.实现学生信息的添加功能
//    在模板的表单中指定请求地址与请求方式
//    为每一个表单项添加name属性
//    添加实现学生信息功能路由
//    接收客户端传递过来的学生信息
//    将学生信息添加到数据库中
//    将页面重定向到学生信息列表页面
// 7.实现学生信息的展示功能
// 2-1引入http模块
const http = require('http')
// 5-2引入path模块
const path = require('path')
// 5-1引入模板引擎
const template = require('art-template')
// 5-5引入静态资源访问模块
const serveStatic = require('serve-static')
// 7-1引入处理日期的第三方模块
const dateformat = require('dateformat')
// 引入index.js中的router
const router = require('./route/index')
// 5-6实现静态资源访问服务
const serve = serveStatic(path.join(__dirname, 'public'))
// 5-3配置模板的根目录
template.defaults.root = path.join(__dirname, 'views')
// 5-4配置模板默认后缀
template.defaults.extname = '.art'
// 7-2处理日期格式的方式
template.defaults.imports.dateformat = dateformat
// 3数据库连接
require('./model/connect.js')
const {
  parse
} = require('querystring')
const {
  totalmem
} = require('os')
const {
  format
} = require('path')
// 2-2创建网站服务器
const app = http.createServer()
// 2-3客户端访问服务器
app.on('request', (req, res) => {
  router(req, res, () => {})
  serve(req, res, () => {})
})
// 2-4监听一个固定端口
app.listen(3000)
console.log('服务器启动成功')

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <title>学生档案</title>
  <link rel="stylesheet" href="./css/main.css" />
  <!-- stu/views/index.art -->
</head>
<body>
  <form action="/add" method="post">
    <fieldset>
      <legend>学生档案</legend>
      <label>
        姓名:
        <input name="name" class="normal" type="text" autofocus placeholder="请输入姓名" />
      </label>
      <label>
        年龄:
        <input name="age" class="normal" type="text" placeholder="请输入年龄" />
      </label>
      <label>
        性别:
        <input type="radio" value="0" name="sex" /> 男
        <input type="radio" value="1" name="sex" /> 女
      </label>
      <label>
        邮箱地址:
        <input name="email" class="normal" type="text" placeholder="请输入邮箱地址" />
      </label>
      <label>
        爱好:
        <input type="checkbox" value="0" name="hobbies" /> 敲代码
        <input type="checkbox" value="1" name="hobbies" /> 打篮球
        <input type="checkbox" value="1" name="hobbies" /> 睡觉
      </label>
      <label>
        所属学院:
        <select class="normal" name="collage">
          <option value="前端与移动开发">前端与移动开发</option>
          <option value="PHP">PHP</option>
          <option value="JAVA">JAVA</option>
          <option value="Android">Android</option>
          <option value="IOS">IOS</option>
          <option value="UI设计">UI设计</option>
          <option value="C++">C++</option>
        </select>
      </label>
      <label>
        入学日期: <input type="date" class="normal" name="enterDate" />
      </label>
      <label class="btn">
        <input type="submit" value="提交" class="normal" />
      </label>
    </fieldset>
  </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>学员信息</title>
  <link rel="stylesheet" href="./css/list.css">
  <!-- stu/views/list.art -->
</head>
<body>
  <table>
    <caption>学员信息</caption>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>邮箱地址</th>
      <th>爱好</th>
      <th>所属学院</th>
      <th>入学时间</th>
    </tr>
    {{each students}}
    <tr>
      <th>{{$value.name}}</th>
      <th>{{$value.age}}</th>
      <th>{{$value.sex == '0' ? '男' : '女'}}</th>
      <th>{{$value.email}}</th>
      <th>
        {{each $value.hobbies}}
        <span>{{$value}}</span>
        {{/each}}
      </th>
      <th>{{$value.collage}}</th>
      <th>{{dateformat($value.enterDate, 'yyyy-mm-dd')}}</th>
    </tr>
    {{/each}}
  </table>
</body>
</html>

// stu/route/index.js

// 4-1引入router模块
const getRouter = require('router')
// 4-2获取路由对象
const router = getRouter()
// 3学生信息集合
const Student = require('../model/user')
// 5-1引入模板引擎
const template = require('art-template')
// 6-2引入querystring，将获取到的字符串转换为对象
const querystring = require('querystring')
const {
  model
} = require('../model/user')

// 4-3路由定向
router.get('/add', (req, res) => {
  let html = template('index', {})
  res.end(html)
})
router.get('/list', async (req, res) => {
  // 查询学生信息
  let students = await Student.find()
  console.log(students)
  let html = template('list', {
    students: students,
  })
  res.end(html)
})
// 6-1实现学生信息添加功能路由
router.post('/add', (req, res) => {
  // 接收post请求参数
  let formData = ''
  req.on('data', (param) => {
    formData += param
  })
  req.on('end', async () => {
    console.log(formData)
    await Student.create(querystring.parse(formData))
    res.writeHead(301, {
      Location: '/list',
    })
    res.end()
  })
})
// app.js中要用到router，将router爆出去
module.exports = router

/* stu/public/css/list.css */
body {
  padding: 0;
  margin: 0;
}

table {
  border-collapse: collapse;
}

table,
td,
th {
  text-align: center;
  line-height: 30px;
  border: 1px solid #CCC;
}

caption {
  font-weight: bold;
  font-size: 24px;
  margin-bottom: 10px;
}

table {
  width: 960px;
  margin: 50px auto;
}

a {
  text-decoration: none;
  color: #333;
}

a:hover {
  text-decoration: underline;
  color: #000;
}

/* stu/public/css/main.css */
body {
  margin: 0;
  padding: 0 0 40px;
  background-color: #F7F7F7;
  font-family: '微软雅黑';
}

form {
  max-width: 640px;
  width: 100%;
  margin: 24px auto;
  font-size: 28px;
}

label {
  display: block;
  margin: 10px 10px 15px;
  font-size: 24px;
}

.normal {
  display: block;
  width: 100%;
  height: 40px;
  font-size: 22px;
  margin-top: 10px;
  padding: 6px 10px;
  color: #333;
  border: 1px solid #CCC;
  box-sizing: border-box;
}

.btn {
  margin-top: 30px;
}

.btn input {
  color: #FFF;
  background-color: green;
  border: 0 none;
  outline: none;
  cursor: pointer;
}

input[type="file"] {
  /*opacity: 0;*/
  width: 120px;
  position: absolute;
  right: 0;
  z-index: 9;
}

.import {
  height: 40px;
  position: relative;
}

// stu/model/connect.js
// 3-1引入mongoose
const mongoose = require('mongoose')
// 3-2连接数据库
mongoose
  .connect('mongodb://localhost/test', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => console.log('数据库连接成功'))
  .catch(() => console.log('数据库连接成功'))

// stu/model/user.js
const mongoose = require('mongoose')
const {
  mod
} = require('prelude-ls')
// 创建学生集合规则
const studentsSchema = new mongoose.Schema({
  name: {
    type: String,
    required: true,
    minlength: 2,
    maxlength: 10
  },
  age: {
    type: Number,
    min: 10,
    max: 22
  },
  sex: {
    type: String
  },
  email: String,
  hobbies: [String],
  collage: String,
  enterDate: {
    type: Date,
    default: Date.now
  }
})
// 创建学生集合
const Student = mongoose.model('Student', studentsSchema)
// 将学生集合进行导出
module.exports = Student

http://www.niftyadmin.cn/n/3388324.html

相关文章

Could not resolve com.android.support:support-v4:23+

Could not resolve com.android.support:support-v4:23+

这个有很多种情况会造成这个问题 就说一下我解决的方法 将23换成具体的版本&#xff0c;注意&#xff0c;当你的工程里没有添加这个依赖的时候&#xff0c;可能是你的依赖工程里添加了这个&#xff0c;导致了问题 借用图片 https://blog.csdn.net/AureLeon/article/details…
阅读更多...
tornado长连接断开的处理机制

tornado长连接断开的处理机制

使用tornado的异步http调用时候&#xff0c;在继续RequestHandler的子类中&#xff0c;可以重载on_connection_close方法。 此方法在对端连接关闭&#xff0c;或者在socket上读写错误的时候被调用&#xff0c;可以让服务器做一些清理。 调用过程大概这样&#xff1a; 首先说明&…
阅读更多...
flutter 下载地址

flutter 下载地址

https://flutter.dev/docs/development/tools/sdk/releases#windows 右键得到谷歌的地址 因为墙的原因&#xff0c;将前面的域名换成 https://storage.flutter-io.cn
阅读更多...
v20超级计算机,荣耀V20和华为P20Pro哪个好

v20超级计算机,荣耀V20和华为P20Pro哪个好

荣耀V20和华为P20Pro哪个好&#xff1f;很多小伙伴们都还不知道&#xff0c;下面52z飞翔下载小编为大家整理了荣耀V20和华为P20Pro区别对比评测&#xff0c;一起来看看吧。荣耀V20和华为P20Pro哪个好荣耀V20荣耀V20采用6.4英寸魅眼全视屏&#xff0c;首创屏下摄像头技术&#x…
阅读更多...
屏蔽百度

屏蔽百度

https://jingyan.baidu.com/article/17bd8e5278025685ab2bb80b.html
阅读更多...
as 有坑，记录一下

as 有坑，记录一下

今天遇到一个问题&#xff0c;自定义view一直显示空指针&#xff0c;而事实上layout里面是有的&#xff0c;路径也没错 项目之前一直好好的&#xff0c;都没动过这部分&#xff0c;所以觉得非常奇怪 找了半天&#xff0c;没找到问题&#xff0c;最后&#xff0c;as clean一下…
阅读更多...
alevel计算机教材答案,alevel计算机教材电子版及内容和目录大纲

alevel计算机教材答案,alevel计算机教材电子版及内容和目录大纲

alevel计算机教材电子版及内容和目录大纲alevel物理教材PART 1 THEORY FUNDAMENTALSChapter 1 Information representation 2Chapter 2 Communication and Internet technologies 18Chapter 3 Hardware 36Chapter 4 Logic gates and logic circuits 49Chapter 5 Processor fund…
阅读更多...
为组件uni-icons增加自定义图标

为组件uni-icons增加自定义图标

1.在阿里巴巴图标库找到需要的图标&#xff0c;下载为svg格式备用 2.通过在线ttf编辑器http://fontstore.baidu.com/static/editor/index.html#打开项目static文件夹下的uni.ttf文件 3.导入第一步下载的svg图标 4.选中新导入的图标&#xff0c;点击设置代码点&#xff0c;新增的…
阅读更多...
最新文章

Copyright @ 2022~2023