两小时-1（搜索，跳转，express基础）

直接使用router-link to 来跳转

Home

About

搜索功能

filter includes

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let res = nums.filter((num) => {
  return num > 5;
});

console.log(res);  // [6, 7, 8, 9, 10]

includes 可以判断一个数组中是否包含某一个元素，并返回true 或者false
['a','b','c'].includes('a')
true

['a','b','c'].includes(1)
false

搜索功能

const projects = [
  "Project Alpha",
  "Project Beta",
  "Gamma Release",
  "Delta Project",
  "Epsilon Update"
];

// 用户输入的搜索关键词
const searchTerm = "Project";

// 使用filter和includes实现搜索功能
//下面的project为数组每一项的值
const searchResults = projects.filter(project => 
  project.toLowerCase().includes(searchTerm.toLowerCase())
);

console.log(searchResults);

使用路由的方式来传递参数

Header.vue (简化示例)

<template>
  <header>
    <input type="text" v-model="searchQuery" placeholder="搜索..." />
    <button @click="onSearch">搜索</button>
  </header>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const searchQuery = ref('');
const router = useRouter();

const onSearch = () => {
  // 使用Vue Router的push方法，将搜索关键词作为查询参数传递
  router.push({ name: 'Search', query: { q: searchQuery.value } });
};
</script>
//确保您的Vue Router配置中有一个名为Search的路由，如下所示：

//router.js中

import { createRouter, createWebHistory } from 'vue-router';
import Search from '@/components/Search.vue'; // 根据实际路径导入Search组件

const routes = [
  // 其他路由...
  {
    path: '/search',
    name: 'Search',
    component: Search,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;
Search.vue (接收并显示搜索关键词)

<template>
  <div>
    <h2>搜索结果 for "{{ $route.query.q }}"</h2>
    <!-- 在此处放置根据$q获取的搜索结果的渲染逻辑 -->
  </div>
</template>

点击查看更多（留言板）（默认八条，每点一次增加八条）

<template>
  <ul>
    <li v-for="item in items.slice(0, itemsToShow)" :key="item">
      {{ item }}
    </li>
  </ul>
  <button v-if="itemsToShow < maxItems" @click="showMore">查看更多</button>
</template>

// 在 setup 函数中继续添加
const showMore = () => {
  if (itemsToShow.value < maxItems) {
    itemsToShow.value += 3; // 每次点击增加显示3个，可根据需要调整
  }
};

安装创建express项目

npm install express -g

npm install -g express-generator
node -v
npm -v
express --version
express projectname
cd projectname
npm install
npm start
访问127.0.0.1:3000即可

express helloworld

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

终端输入node app.js 运行

连接mysql数据库

//
//在连接数据库之前需要进入项目终端输入：npm i mysql
//
//之后在项目目录下新建文件夹db,db目录下新建文件index.js
//
//然后将是引入mysql的详细步骤
//
//
// 1、引入mysql
const mysql = require("mysql");
// 2、建立一个连接池
const db = mysql.createPool({
  host: "127.0.0.1", // 数据库的IP地址(本地的或者是云服务器的都可以)
  user: "root",//用户名
  password: "654321",
  database: "sqltest", //指定要操作哪个数据库
});
 
 
 // 检测数据库是否连接成功
 // db.query("select 1", (err, results) => {
 //   if (err) return console.log(err);
 //   console.log(results);
 // });
 //如果能打印出[ RowDataPacket { '1': 1 } ]代表连接数据库成功
 
 
// 将文件暴露出去
module.exports = db

查：

//
// 使用express搭建web服务器的前提条件是电脑中已经安装nodejs
// 之后进入到项目终端输入:npm i express
//                     npm i mysql安装所需要用到的包
//
//用express搭建服务器并连接数据库的详细步骤如下
//首先新建一个后缀名为.js的文件
//1、引入express包，抛出的db/index.js包
const express=require('express');
const db=require('./db/index.js')
//2、实例化express对象
const app= express();
//3、开启端口进行监听发送过来的请求:包含端口号，和一个回调函数用于告知服务器是否启动成功
app.listen( 3000 , () => {
	console.log("服务器已经成功启动，并在http://127.0.0.1:3000/上运行")
})
//4、接下来就是根据发送过来的路由请求进行处理并相应
app.get('/login',(req,res)=>{
	res.send("ok")
})
 
//5、查——————————————————————————————————————————————————————————————————————————————————
app.get("/infor", (req, res) => {
  // 定义sql语句:意思为查询test表
  const sql = "select * from test";
  // 执行sql语句
  db.query(sql, (err, result) => {
    // 执行失败
    if (err) {
      return res.send({ state: 1, message: err });
    }
	//执行成功后返回，表中的数据
    return res.send({ state: 0, message: "查询成功", data: result });
  });
});

增：

//
// 使用express搭建web服务器的前提条件是电脑中已经安装nodejs
// 之后进入到项目终端输入:npm i express
//                     npm i mysql安装所需要用到的包
//
//用express搭建服务器并连接数据库的详细步骤如下
//首先新建一个后缀名为.js的文件
//1、引入express包，抛出的db/index.js包
const express=require('express');
const db=require('./db/index.js')
//2、实例化express对象
const app= express();
//3、开启端口进行监听发送过来的请求:包含端口号，和一个回调函数用于告知服务器是否启动成功
app.listen( 3000 , () => {
	console.log("服务器已经成功启动，并在http://127.0.0.1:3000/上运行")
})
//4、接下来就是根据发送过来的路由请求进行处理并相应
app.get('/login',(req,res)=>{
	res.send("ok")
})
 
 
//5、增
app.get("/increase", (req,res)=>{
  // 先取到要增加的字段值
  const addInfor = req.query
  // 定义sql语句
  const sql = "insert into test set ?"
  // 执行sql语句,第二个参数代表sql语句中？的值
  /**
   * 如果增加的字段和数据库中的字段不是一一对应的
   * 将addInfor换成{name: addInfor.name, age: addInfor.age}
   * name代表数据库中的字段，addInfor.name代表他要增加的值
   */
  db.query(sql, addInfor, (err,results)=>{
    // sql语句执行失败
    if(err) {
      return res.send({status: 1, message: err.message})
    }
    // 数据库语句执行成功，但影响的条数不等于1，没有增加，也属于失败
    if(results.affectedRows !== 1) {
      return res.send({status: 1, message: '数据添加失败'})
    }
    // sql语句执行成功，影响条数也等于1
    return res.send({status:0, message: '添加成功', data:results})
  })
})
 
 

改
UPDATE login_table SET username='${username}', password=${password} WHERE username='${findUsername}'

删
DELETE FROM login_table WHERE username='${username}'