软开2小结

软开2

前端

Node.js---express

托管静态资源

app.use('/login', express.static('./logreg/log.html'))
app.use('/register', express.static('./logreg/register.html'))

jjm版

Vue.js根据路由获取参数+AJAX发送请求+JQuery.js获取组件，自增组件

获取参数

url = window.location.href
            paramString = url.substring(url.indexOf("?") + 1, url.length)
            paramList = paramString.split("&")
            data = []
            for (i = 0; i < paramList.length; i++) {
                param = paramList[i]
                map = param.split("=")
                if (map[0] == "goodId") {
                    this.goodId = map[1]
                } else if (map[0] == "userId") {
                    this.userId = map[1]
                }
            }
//示例 /home?userId=1&goodId=1

其实对应的，也可以直接用JQuery.js获取参数

//from Gpt3.5
// 获取URL中指定参数的值
function getParameterValue(param) {
  var pageUrl = window.location.search.substring(1); // 获取URL中?后的查询参数部分，去掉问号
  var params = pageUrl.split('&'); // 将查询参数分割成数组

  for (var i = 0; i < params.length; i++) {
    var paramNameValue = params[i].split('=');
    if (paramNameValue[0] === param) {
      return paramNameValue[1]; // 返回参数的值
    }
  }
  return null; // 如果参数不存在，则返回null或者可以根据需要返回其他默认值
}

// 用法示例
$(document).ready(function() {
  var id = getParameterValue('id');
  var name = getParameterValue('name');

  if (id) {
    console.log('ID参数的值为：' + id);
  }

  if (name) {
    console.log('Name参数的值为：' + name);
  }
});
//路由示例：http://example.com/page?id=123&name=John

AJAX请求

$.ajax({
        type: "get",
        url: `http://124.71.184.158/goods/${goodId}`,
        async: false,
        success: function (response) {
            order.name = response[0].Name
            order.price = response[0].Price
        }
    })

JQuery.js获取组件（组件自增）

tr = `<tr> <td>${i}</td> <td> `+ `<div class="img"><img src="${order.img_url}" /></div> ` + `</td> <td>${order.name}</td> <td>${order.create_time}</td> ` + `<td>¥ ${order.price}</td> </tr>`
$(".tb_two").append(tr)

zrx版

EJS模板引擎渲染

调用模板引擎

//使用模板引擎
app.set('view engine', 'ejs')
app.set('views', path.join(__dirname, 'views'));

具体EJS样例（与HTML几乎一致）

<div class="left">欢迎光临校园二手交易平台！ &nbsp; 用户<%= UserID %>!</div>

通过<%= 参数 %>获取对应的数据

参数来自接口提供的json数据的key（键）访问对应的value（值）-------------下文会讲接口

其实和jjm版相比只是少了一步根据路由参数发送请求的过程

后端

Node.js---express

前置

新建express实例

const express = require('express')
//调用express
const app = express()

路由

利用Router模块对接口进行封装

在app.js入口文件调用

//路由
const router = require('./routes');
app.use('/', router);
//监听服务器是否打开
app.listen(80, () => {
    console.log("express server running at http://127.0.0.1:80")
}

连接数据库

//----router.js
const mysql = require('mysql');
const connection = mysql.createConnection({
  host: '127.0.0.1',
  port: 3306,
  user: 'root',
  password: 'ComplexPassword123!',
  database: 'secondhand'
})
connection.connect(err => {
  if (err) {
    console.error('failed to connect to database, error: ', err)
    process.exit(1)
  }
})

接口

普通接口编写

// 注册
router.post('/register', function (req, res) {
  const account = req.body.account
  const password = req.body.password

  if (!account || !password) {
    return res.status(404).json({ msg: "invalid parameters" })
  }
  const sql = 'insert into secondhand.accounts (Account,Password)Values(?,?)'
  connection.query(sql, [account, password], (err, result) => {
    if (err) {
      return res.status(500).json({ msg: err })
    }
    if (result.length <= 0) {
      return res.status(404).end()
    } else {
      res.json(result)
    }
  })
})
//以用户注册接口为例
//以json格式返回数据库查到的数据

模板引擎接口编写

router.get('/home/:id', function (req, res) {
  const AccountId = req.params.id;
  const sql = 'select * from secondhand.users WHERE AccountID= ?'
  connection.query(sql, [AccountId], (err, result) => {
    if (err) {
      return res.status(500).json({ msg: err })
    }
    if (result.length <= 0) {
      return res.status(404).end()
    } else {
      var data = result[0]
      res.render('home',data)
    }
  })
});
//返回一个根据data渲染好的home页面
//home为EJS模板文件
//data为数据库返回数据

图片接口编写

存储于本地（还可以调用OSS数据库，存储图片对象，本文不做演示）

前置

//引入multer和path模块
const multer = require('multer');
const path = require('path');
// 设置存储目录和文件名
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './public/uploads'); // 指定存储目录，可以根据需要修改
  },
  filename: function (req, file, cb) {
    const extname = path.extname(file.originalname);
    cb(null, Date.now() + extname); // 使用时间戳作为文件名，保证唯一性
  }
});

const upload = multer({ storage: storage });

具体接口

 //添加商品图片
router.post('/upload/:id', upload.single('file'), function (req, res, next) {
  // 获取上传的文件信息
  const file = req.file;
  const GoodsID =req.params.id
  if (!file) {
    res.status(400).json({ error: 'No file uploaded' });
    return;
  }
  const address='http://124.71.184.158/'+file.path
  // 将文件信息保存到数据库
  const sql = 'INSERT INTO secondhand.goodsimg (address,GoodsID) values(?,?)';
  const values = [address,GoodsID];

  connection.query(sql, values, function (err, result) {
    if (err) {
      console.error('Error saving image to database', err);
      res.status(500).json({ error: 'Failed to save image to database' });
      return;
    }
    res.status(200).json({ message: 'File uploaded and saved to database' });
  });
});