nodejs介绍

npm cnpm yarn

原生node.js接口请求 [不用]

应用生成器工具express-generator [不用]

express框架

index.js 的内容

//5.直接把数据输出到页面里面   index.js里面写的

//index.js中粘贴
const express = require('express')
const mysql = require('mysql')
const bodyParser = require('body-parser')
const app = express()
const port = 3000
const jsonParser = bodyParser.json()
const urlencodedParser = bodyParser.urlencoded({ extended: false })
app.use(urlencodedParser)
app.use(jsonParser)

//创建数据库链接
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'root',
    database: 'yuedu'
})
//连接数据库
connection.connect()

// 打印全部数据
// connection.query('select * from t_articles;', function (err, rows, fields) {
//     console.log(rows)
// })

// 文章列表接口
app.get('/articles', async (req, res) => {
    console.log(1111, req.query.id)
    const id = req.query.id
    const mount = req.query.limit
    const page = req.query.page
    let total;
    try {
        await connection.query(`select * from t_articles where type_id=${id};`, function (err, rows, fields) {
            total = rows.length
        });
        await connection.query(`select * from t_articles where type_id=${id} limit ${(page - 1) * mount},${mount};`, function (err, rows, fields) {
            res.send({
                status: 200,
                data: {
                    data: rows,
                    total: total
                }
            })
        });
    } catch {
        console.log('输出错误')
    }
})

//注册接口
app.post('/register', (req, res) => {
    console.log(req.body.name, req.body.psw)
    const username = req.body.name
    const psw = req.body.psw
    connection.query(`insert into t_users (username,password) values ('${username}','${psw}');`, function (err, rows, fields) {
        res.send({
            status: 200
        })
    })
})

//登录接口
app.get('/login', (req, res) => {
    console.log(req.body.name, req.body.psw)
    const username = req.query.name
    const password = req.query.psw
    console.log(username, password)
    connection.query(`select * from t_users where username="${username}" and password="${password}";`, function (err, rows, fields) {
        console.log(rows)
        if (rows.length > 0) {
            res.send({
                status: 1    //如果匹配成功 返回给前台1
            })
        } else {
            res.send({
                status: 2    //如果匹配不成功 返回给前台2
            })
        }
    })
})

//修改用户名接口
app.put('/changeUser', (req, res) => {
    connection.query('updata t_users set username="surperman" where id=7', function (err, rows, fields) {
        res.send({
            status: 200
        })
    })
})

//修改文章标题接口
app.put('/changeArticle', (req, res) => {
    const title = req.body.title
    const author = req.body.author
    connection.query(`update t_articles set title="${title}",author="${author}" where id=5;`, function (err, rows, fields) {
        res.send({
            status: 200
        })
    })
})

//删除文章接口
app.delete('/delArticle', (req, res) => {
    connection.query('delete from t_articles where id=1', function (err, rows, fields) {
        res.send({
            status: 200
        })
    })
})

// 文章分类接口
app.get('/sorts', (req, res) => {
    connection.query('select * from t_types', function (err, rows, fields) {
        res.send({
            status: 200,
            data: rows
        })
    })
})


//文章详情页面
app.get('/detail', (req, res) => {
    const id = req.query.id
    connection.query(`select * from t_articles where id=${id}`, function (err, rows, fields) {
        res.send({
            status: 200,
            data: rows
        })
    })
})


app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})

index.html 的内容

//在html页面中打印出来

<ul>
    <li></li>
</ul>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    var ul = document.querySelector("#ul");
    var tabId = 1;
    var page1 = document.querySelector("#page1");
    var ul1 = document.querySelector("#ul1");
    var str2 = "";
    var ul = document.querySelector("ul");
    var str = '';


---------------------------------------------------------------------------------------- 
//分页按钮
function pageMount(mount) {
    str2 = "";
    for (var i = 1; i <= mount; i++) {
        str2 += `
             <li onclick="getPage(${i})"> ${i} </li>
            `
    }
    page1.innerHTML = str2;
}
---------------------------------------------------------------------------------------- 
//分页数据请求
function getPage(page) {
  tab(tabId, page);
}
----------------------------------------------------------------------------------------
// 请求分类 标题tab切换   点击标题切换列表
axios.get("http://localhost:3000/sorts").then(res => {
    console.log(res.data.data)
    str = ''
    res.data.data.forEach(item => {
        str += `
            <li onclick="tab(${item.id})">${item.type}</li>
        `
    })
    ul.innerHTML = str
}).catch(err => {
    console.log(err)
})
----------------------------------------------------------------------------------------
//文章列表
    fetch("http://localhost:3000/articles").then(res => {
        return res.json()
    }).then(res1 => {
        console.log(res1.data);
        res1.data.forEach(item => {
            str += `
            <li>${item.title}</li>
            `
        });
        ul.innerHTML = str
    }).catch(err => {
        console.log(err);
    })
----------------------------------------------------------------------------------------
// 注册
btn.onclick = () => {
    fetch("http://localhost:3000/register", {
        method: "POST"
    }).then(res => res.json()).then(res1 => {
        console.log(res1);
    }).catch(err => {
        console.log(err);
    })
}
----------------------------------------------------------------------------------------
//登录
btn.onclick = function () {
    const admin = document.querySelector("#admin").value
    const psw = document.querySelector("#psw").value
    axios.get("http://localhost:3000/login", {
        params: {
            name: admin,
            psw
        }
    }).then(res => {
        console.log(res);
        if (res.data.status == 1) {
            alert("登录成功")
            window.location.href = "index.html"
        } else {
            alert("登录失败")
        }
    }).catch(err => {
        console.log(err);
    })
}
---------------------------------------------------------------------------------------- 
// 修改
btn.onclick = () => {
    fetch("http://localhost:3000/changeUser", {
        method: "PUT"
    }).then(res => res.json()).then(res1 => {
        console.log(res1);
    }).catch(err => {
        console.log(err);
    })
}
---------------------------------------------------------------------------------------- 
//注册列表
var btn = document.querySelector("button");
btn.onclick = function () {
    const admin = document.querySelector("#admin").value
    const psw = document.querySelector("#psw").value
    axios.post("http://localhost:3000/register", {
        name: admin,
        psw
    }).then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })
}
---------------------------------------------------------------------------------------- 
// 文章列表
var str = '';
fetch("http://localhost:3000/articles").then(res => {
    return res.json()
}).then(res1 => {
    console.log(res1.data);
    res1.data.forEach(item => {
        str += `
    <li>${item.title}</li>
    `
    });
    ul.innerHTML = str
}).catch(err => {
    console.log(err);
})    
---------------------------------------------------------------------------------------- 
// 修改文章标题
btn.onclick = function () {
    const tit = document.querySelector("#title").value
    const author = document.querySelector("#author").value
    axios.put("http://localhost:3000/changeArticle", {
        title: tit,
        author: author
    }).then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })
}
</script>

---------------------------------------------------------------------------------------- 
//请求文章
var ul1 = document.querySelector("#ul1");
function tab(id = 1,page = 1) {
    str1 = ''
    tabId=id
    axios.get("http://localhost:3000/articles", {
        params: {
            id,
            limit:15,
            page:page
        }
    }).then(res => {
        console.log(res.data.data)
        res.data.data.forEach(item => {
            str1 += `
            <li>${item.title} 
                <p onclick="del(${item.id})">删除</p>
            </li>
          `
        })
        ul1.innerHTML = str1
    }).catch(err => {
        console.log(err);
    })
}
tab()
---------------------------------------------------------------------------------------- 
//删除文章
function del(id) {
    console.log(id)
    axios.delete("http://localhost:3000/delArticle?id=" + id).then(res => {
        console.log(res)
        tab()
    }).catch(err => {
        console.log(err)
    })
}
----------------------------------------------------------------------------------------
// 请求文章 标题 index.html
function tab(id = 1, page = 1) {
    str1 = '';
    tabId = id
    axios.get("http://localhost:3000/articles", {
        params: {
            id,
            limit: 10,
            page: page
        }
    }).then(res => {
        console.log(res.data.data.data, res.data.data.total / 10)
        pageMount(Math.ceil(res.data.data.total / 10))
        res.data.data.data.forEach(item => {
            str1 += `
            <li>
                <a href="detail.html?id=${item.id}">
                    ${item.title}
                </a>
            </li>
            `
        })
        ul1.innerHTML = str1
    }).catch(err => {
        console.log(err);
    })
}
tab()

//跳转到详情页 detail.html
<script>
    <div class="detail">
        <div class="content"></div>
    </div>
    var detail = document.querySelector(".detail");
    var str = '';
    axios.get("http://localhost:3000/detail", {
        params: {
            id: location.search.split("=")[1]
        }
    }).then(res => {
        var tit = res.data.data[0].title;
        var content = res.data.data[0].content;
        console.log(111, res.data.data[0].title)
        str += `
             <h2>${tit}</h2>
             <div>${content}</div>
        `
        detail.innerHTML = str
    }).catch(err => {
        console.log(err)
    })
</script>




</script>

mysql解除外键关联

传值

nodemon自动更新工具 node index.js

跨域问题

vue中使用本地数据库