nodejs项目创建

瑞雪纷纷
122 阅读5分钟

nodejs项目创建

项目初始化

cnpm -y init 生成package.json文件

搭建服务器

cnpm i express 生成node_modules

创建public文件夹

存放前端页面

创建app.js

//1.导入模块
const express = require('express')
//2.创建app对象，通过express() 底层createServer
const app = express()
//3.路由，语法：app.HTTP请求方式（请求路径，回调函数）
app.get('/', (req, res) => {
    res.send('你好')
})
//4.监听端口
app.listen(3000,()=>{
    console.log('ok')
})

//静态资源托管
app.use(express.static('./public'))

运行指令

nodemon app.js 或 node app.js

项目基础结构

项目基础结构转存失败，建议直接上传图片文件

路由

介绍

  • 什么是路由：就是网址

  • 什么是路由参数：就是网址参数

  • 在NodeJS中作用：声明响应的数据

语法

  • **明确：**HTTP请求类型/动词有get（查）、post（创建）、put（修改）、delete（删除）等

  • **普通语法：**app.HTTP请求类型（请求路径，回调函数）

发送 GET请求：app.get（请求路径，回调函数）

发送POST请求：app.post（请求路径，回调函数）

发送 任意请求：app.all（请求路径，回调函数）

参数处理

get参数

app.get('/stu/:name', (req, res) => {
	console.log(req.params);
	res.send('匹配成功，快去看控制台有没有获取数据..')
})

post参数

//1.导入模块
const express = require('express')
//2.创建app对象，通过express() 底层createServer
const app = express()


//静态资源托管
app.use(express.static('./public'))
app.use(express.urlencoded())  //帮助post     console.log(req.body);取到值

//4.监听端口
app.listen(3000,()=>{
    console.log('ok')
})

app.post('/test', function (req, res) {
    console.log(req.body);
    res.send('匹配成功，快去看控制台有没有获取数据..')
  })

托管静态文件

静态web资源服务器
app.use(express.static('./public'))
app.use(express.static("./public", { index: "./html/login.html" }));

前缀的使用意义：
- 可以迷惑别人，一定程度上阻止别人猜测我们服务器的目录结构
- 可以帮助我们更好的组织和管理静态资源
app.use('/abc',express.static('./public'))

前缀.jpg

路由模块化

含义：将原本可能写在一个文件中的路由规则，拆分成若干个路由文件

核心思想：能拆就拆（拆到不能拆为止，解耦，高内聚，低耦合）

主文件

//1.导入模块
const express = require("express");
//2.创建app对象，通过express() 底层createServer
const app = express();

//静态资源托管
app.use(express.static('./public'))

const userRouter = require('./router/user')
const newRouter = require('./router/new')
app.use(userRouter)
app.use(newRouter)

//4.监听端口
app.listen(3000, () => {
  console.log("ok");
});

路由模块

user.js
const express = require('express')
const router = express.Router()
router.post('/user/login',(req,res)=>{
    res.send('登录')
})
router.post('/user/register',(req,res)=>{
    res.send('注册')
})
module.exports = router
new.js

const express = require('express')
const router = express.Router()
router.get('/new/info',(req,res)=>{
    res.send('信息')
})
module.exports = router

使用mongodb

开启

mongo

查看所有的数据库列表

show dbs

创建或使用数据库

use  名称            如果库中没有集合，db不会显示

查看当前数据库

db

查询库中是否有表

show tables  等价  show collections

查询表

db.logins.find()

删除表

db.logins.drop()

删除库

db.dropBatabase()

添加表

db.logins.insert({id:1,age:23,usename:'ah'})         logins加s原因node插进来默认负数

刚才命令集合：

  • show dbs：查看数据库列表
  • use db：使用/创建数据库
  • db：查看当前库名
  • db.表名.insert()：新增数据&可能会创建出一个数据表
  • show tables / show collections：查看当前库中的表列表
  • db.表名.drop()：删除指定的表
  • db.dropDatabase()：删除当前的库

mongoose

使用mongoose连接数据库

npm i mongoose

创建common.js文件

// 导入模块
const mongoose = require('mongoose')
// 连接数据库 返回promise对象  库必须要先存在
mongoose.connect('mongodb://127.0.0.1:27017/ind').then(()=>{
    console.log('连接成功')
}).catch((err)=>{
    console.log('连接失败',err)
})

定义Schema

Schema是mongoose中会用到的一种数据模式，可以理解为数据表结构的定义；每个schema会映射到mongodb中的一个集合，它不具备操作数据库S的能力。Schema中定义数据校验，默认值，字段名，字段类型等特性。

作用：

  • 建表（也就是说，后期建表不再通过mongoDB的命令行的形式产生了，而是通过JavaScript代码实现）
// 创建用户集合规则
const users = new mongoose.Schema({
    // 字段名/域名称
    name: {
        // 指字域类型
        type: String,
        // 必填字段
        required: true,
        // 字段最小长度  minlength 用于字符串类型
        minlength: 2,
    },
    age: {
        type: Number,
        // 默认值
        default: 10,
        // 字段最小值 min用于数字类型
        min: 1,
    },
    pwd: String,
    email: String
});

在Schema定义好后，后期增删改查时，如果对应的表不存在，则其会自动按照Schema的约束进行建表，如果表存在了则不重新建立。

查询

model.find({}, { _id: 0 }).then((data) => {
  console.log(data);
});


连接成功控制台显示
[ { id: 1, age: 23, usename: 'ah' } ]
                                           { _id: 0 }不返回_id  若不返回其他可以{名称:0}

注册逻辑

<body>
    <h1>登录页</h1>
    <div>
        账号：<input type="text" id="username"><br>
        密码：<input type="text" id="password">
        <button>提交</button>
    </div>
    <script>
        const inuser = document.querySelector('#username')
        const inpass = document.querySelector('#password')
        const bnt = document.querySelector('button')
        bnt.onclick = function () {
            // let data = `username=${inuser.value}&password=${inpass.value}`
            // console.log(data)
            let xhr = new XMLHttpRequest()
            xhr.open('post', 'http://localhost:3000/user/register')
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            let data = `username=${inuser.value}&password=${inpass.value}`
            xhr.send(data);
            xhr.onreadystatechange = function () {
                //验证当前的装态接受返回的信息
                if (xhr.readyState == 4) {
                    //接受服务器返回的信
                    var info = xhr.responseText;
                    console.log(info)
                }
            }
        }

    </script>
</body>

router/user.js

cnpm i jsonwebtoken 生成token

const express = require("express");

const router = express.Router();

const model = require("../common/database");
const jwt = require("jsonwebtoken");

router.post("/user/login", (req, res) => {
  const { username, password } = req.body;
  const token = jwt.sign({ username }, "dw", { expiresIn: "1h" });  //生成token
  model.find({ username, password }).then((data) => {
    if (data.length) {
      res.send({ token, res: "登录成功" });
    } else {
      res.send("登录失败");
    }
  });
});

router.post("/user/register", (req, res) => {
  console.log(req.body);
  const { username, password } = req.body;
  const token = jwt.sign({ username }, "dw", { expiresIn: "1h" });
  model.find({ username: username }).then((data) => {
    if (!data.length) {
      model.insertMany({ username: username, password: password }).then(() => {
        res.send("ok");
      });
    } else {
      res.send("有相同账号");
    }
  });
});

module.exports = router;

app.js

//1.导入模块
const express = require("express");
//2.创建app对象，通过express() 底层createServer
const app = express();


app.use(express.static('./public'))
app.use(express.urlencoded());

const userRouter = require('./router/user')

app.use(userRouter)

//4.监听端口
app.listen(3000, () => {
  console.log("http://localhost:3000");
});

common/database.js

// 导入模块
const mongoose = require("mongoose");
// 连接数据库 返回promise对象  库必须要先存在
mongoose
  .connect("mongodb://127.0.0.1:27017/ind")
  .then(() => {
    console.log("连接成功");
  })
  .catch((err) => {
    console.log("连接失败", err);
  });


const useSchema = new mongoose.Schema({
  username: String,
  password: String,
});

const model = mongoose.model("User", useSchema);

module.exports = model;

修改逻辑

router.get("/user/edlsit", (req, res) => {
  console.log(model);
  model
    .updateMany({ usename: "ah" }, { $set: { usename: "天" } })
    .then((data) => {
      console.log(data);
      res.send("修改成功");
    });
});

文件上传

cnpm i multer

const express = require("express");

const router = express.Router();

//引入一个存储文件的模块
const multer = require("multer");

const store = multer.diskStorage({
  //配置存放路径
  //req请求信息
  //file表示上传信息
  //cb是一个处理具体逻辑的回调函数
  destination(req, file, cb) {
    cb(null, "./public/images");
  },
  //配置图片的名称
  filename(req, file, cb) {
    //表示图片原来的名称
    // let pic = new Date();
    // cb(null, `${file.originalname}-${pic}`);
    let picName = Math.random().toString().slice(2);
    cb(null, `${picName}${file.originalname}`);
  },
});

//定义一个文件接收器
const upload = multer({ storage: store });

//upload.fields([{name:'useFile'}])   数组【】接收多个
router.post("/user/upload", upload.fields([{ name: "useFile" }]), (req, res) => {
  res.send(req.files);
});

module.exports = router;


<body>
    <form>
        <input type="file" name="useFile">
        <button type="button">上传文件</button>
    </form>
    <img src="" alt="">
    <script>
        let form = document.querySelector('form')
        let bnt = document.querySelector('button')
        bnt.onclick = () => {
            let xhr = new XMLHttpRequest()
            let fm = new FormData(form)
            xhr.open('post', 'http://localhost:3000/user/upload')
            xhr.onload = () => {
                console.log(xhr.responseText)
                const path = JSON.parse(xhr.response).useFile[0].path
                document.querySelector('img').src = path.split('c')[1]
            }
            xhr.send(fm)
        }
    </script>
</body>
avatar
文章
阅读
粉丝