• 基于NodeJs+Express+MySQL 实现的个人博客完整项目

    目录

    一、创建项目并初始化

    项目结构

    二、安装项目所需要的包

    三、创建所需要的数据库表

    表 user 用于存放账户密码

    表 notepad 用于存放文章数据

    表 leaving 用于存放留言板的数据

    三、编写app.js文件

    1、导入所有需要的包

    2、创建web服务器

    3、创建db文件夹，在文件夹里面创建mysql.js 注册连接数据库的路由

    4、配置中间件、跨域 和sssion认证

    6、开始接口的配置

    四、创建个人博客的页面

    五、展示个人博客页面

    项目地址：https://gitee.com/danke-hang/Node

    实现的功能: 多用户登录，注册，session认证,通过数据库展示文章列表、文章详情，动态生成文章页面，文章分页查询，留言板功能

    一、创建项目并初始化

    项目结构

    二、安装项目所需要的包

    npm install msyql

    npm install express

    npm install ejs

    三、创建所需要的数据库表

    表 user 用于存放账户密码

    1. CREATE TABLE user  (
    2.   username varchar(100),
    3.   password varchar(100)
    4. )

    表 notepad 用于存放文章数据

    1. CREATE TABLE notepad  (
    2.   id int(11) NOT NULL AUTO_INCREMENT,
    3.   username varchar(100),
    4.   title varchar(100),
    5.   content varchar(9999),
    6.   time varchar(99),
    7.   PRIMARY KEY (`id`)
    8. )

    表 leaving 用于存放留言板的数据

    1. CREATE TABLE leaving  (
    2.   username varchar(100),
    3.   content varchar(9999),
    4.   time varchar(100)
    5. )

    三、编写app.js文件

    1、导入所有需要的包

    1. // 导入express
    2. const express = require('express')
    3. var bodyParser = require('body-parser');
    4. // 导入数据库操作模块
    5. const db = require('./db/mysql')
    6. // 导入 session 中间件
    7. var session = require('express-session')
    8. const ejs=require("ejs");
    9. const fs=require("fs");

    2、创建web服务器

    1. // 创建web服务器
    2. const app = express()
    3.  
    4. // 调用app.listen(端口号， 启动成功后的回调函数)  启动服务器
    5. app.listen(80, () => {
    6.     console.log('127.0.0.1');
    7. })

    3、创建db文件夹，在文件夹里面创建mysql.js 注册连接数据库的路由

    mysql.js

    1. // 1. 导入 mysql 模块
    2. const mysql = require('mysql')
    3. // 2. 建立与 MySQL 数据库的连接关系
    4. const db = mysql.createPool({
    5.   host: 'localhost', // 数据库的 IP 地址
    6.   user: 'root', // 登录数据库的账号
    7.   password: 'root', // 登录数据库的密码
    8.   database: 'movies', // 指定要操作哪个数据库
    9. })
    10.  
    11. module.exports = db

    4、配置中间件、跨域 和sssion认证

    1. // 设置默认首页
    2. // app.use(myexpress.static(__dirname+"/public",{index:"首页地址"}));
    3. app.use(function(req, res) {
    4.     res.send('404 NOT Found')
    5.   })
    6. app.use(express.static(__dirname+"/pages",{index:"login.html"}));
    7. // 跨域
    8. app.use(cors())
    9. app.use(session({
    10.     secret: 'keyboard cat',  // secret 属性的值可以为任意字符串
    11.     resave: false,           // 固定写法
    12.     saveUninitialized: true  // 固定写法
    13. }))
    14. // 中间件定义post传递的格式
    15. app.use(express.static('./pages'))
    16. // 静态资源托管
    17. app.use('/public', express.static('./public'))
    18.  
    19. app.use(express.json())
    20. app.use(bodyParser.urlencoded({extended:true}));//Context-Type 为application/x-www-form-urlencoded 时 返回的对象是一个键值对，当extended为false的时候，键值对中的值就为'String'或'Array'形式，为true的时候，则可为任何数据类型。
    21. app.use(bodyParser.json());//用于解析json 会自动选择最为适宜的解析方式于解析json 会自动选择最为适宜的解析方式

    6、开始接口的配置

    登录接口

    1. app.post('/api/getUsername', function(req, res) {
    2.  
    3.     const sqlStr = 'SELECT username,password FROM user;'
    4.     db.query(sqlStr, (err, results) => {
    5.     // 查询数据失败
    6.     if (err) return console.log(err.message)
    7.  
    8.     console.log(results);
    9.     // 查询数据成功
    10.     // 注意：如果执行的是 select 查询语句，则执行的结果是数组
    11.     let userData = results.map(item => item.username)
    12.     let pwdData = results.map(item => item.password)
    13.  
    14.     if (userData.indexOf(req.body.username) == -1) {
    15.         res.send({
    16.             status: 400,
    17.             message: '该用户不存在',
    18.         })
    19.     } else {
    20.         // 用户存在，判断密码
    21.         if (req.body.password == pwdData[userData.indexOf(req.body.username)]) {
    22.  
    23.             // 将用户的信息，存储到Session中
    24.             req.session.user = req.body
    25.             // 将用户的登陆状态，存储到Session中
    26.             req.session.islogin = true
    27.  
    28.             res.send({
    29.                 status: 200,
    30.                 message: '登录成功',
    31.             })
    32.  
    33.         } else {
    34.             res.send({
    35.                 status: 401,
    36.                 message: '登录失败,密码不正确',
    37.             })
    38.         }
    39.  
    40.     }
    41.     }) 
    42. })

    注册接口

    1. app.post('/api/register', function(req, res) {
    2.  
    3.         // 判断数据库里是否已经存在该用户名,如果没有则注册，如果有则提示重新注册
    4.         const sqlStr = 'SELECT username FROM user;'
    5.         db.query(sqlStr, (err, results) => {
    6.         // 查询数据失败
    7.         if (err) {
    8.             return console.log(err.message)
    9.         } else {
    10.             let userData = results.map(item => item.username)
    11.             // 判断注册的账号是否与数据库里的账号相同 -1 代表数据库里不存在此数据
    12.             if (userData.indexOf(req.body.username) == -1) {
    13.                 const sqlStr = `INSERT into user (username, password) VALUES ( '${req.body.username}', '${req.body.password}' );`
    14.                 db.query(sqlStr, (err, results) => {
    15.                 // 查询数据失败
    16.                 if (err) {
    17.                     return console.log(err.message)
    18.                 } else {
    19.                     res.send({
    20.                         status: 200,
    21.                         message: '注册成功'
    22.                     })
    23.                 }
    24.             })
    25.             } else {
    26.                 res.send({
    27.                     status: 400,
    28.                     message: '账号已存在,请重新注册'
    29.                 })
    30.             }
    31.         }
    32.         })
    33. })

    获取用户姓名的接口

    1. app.get('/api/username', (req, res) => {
    2.  
    3.     // 判断用户是否登录
    4.     if ( !req.session.islogin) {
    5.         return res.send({
    6.             status: 404,
    7.             msg: 'fail'
    8.         })
    9.     }
    10.  
    11.     res.send({
    12.         status: 200,
    13.         msg: 'success',
    14.         username: req.session.user.username
    15.     })
    16. })

    退出登录的接口

    1. app.post('/api/logout', (req, res) => {
    2.  
    3.     req.session.destroy()
    4.     res.send({
    5.         status: 200,
    6.         msg: '退出登陆成功',
    7.     })
    8. })

    获取文章列表

    1. app.get('/api/getArticle', (req, res) => {
    2.  
    3.         const sqlStr = 'SELECT * FROM Notepad;'
    4.         db.query(sqlStr, (err, results) => {
    5.         // 查询数据失败
    6.         if (err) {
    7.             return console.log(err.message)
    8.         } else {
    9.             res.send({
    10.                 status: 200,
    11.                 message: '获取文章成功',
    12.                 data: results,
    13.                 username: req.session.user.username
    14.             })
    15.         }
    16.     })
    17. })

    新增文章接口

    1. app.post('/api/addArticle', (req, res) => {
    2.  
    3.     let time = new Date()
    4.  
    5.     const sqlStr = `INSERT into Notepad VALUES (null, '${req.session.user.username}', '${req.body.title}', '${req.body.content}', '${time.toLocaleString()}');`
    6.     db.query(sqlStr, (err, results) => {
    7.     // 查询数据失败
    8.     if (err) {
    9.         return console.log(err.message)
    10.     } else {
    11.         res.send({
    12.             status: 201,
    13.             message: '添加文章成功',
    14.             data: {}
    15.         })
    16.     }
    17. })
    18. })

    查找文章接口

    1. app.post('/api/search', (req, res) => {
    2.     
    3.         let time = new Date()
    4.     
    5.         const sqlStr = `SELECT * FROM notepad where id=${req.body.id};`
    6.         db.query(sqlStr, (err, results) => {
    7.         // 查询数据失败
    8.         if (err) {
    9.             return console.log(err.message)
    10.         } else {
    11.             res.send({
    12.                 status: 200,
    13.                 message: "查找成功",
    14.                 data: results 
    15.             })
    16.         }
    17.         })
    18. })

    动态获取接口用于渲染文章

    1. app.get('/:_id', (req, res) => {
    2.  
    3.         var num = req.params._id
    4.         num = num.replace('_id', '')
    5.         num = parseInt(num)
    6.         
    7.         // 根据id查找相应的数据 
    8.         const sqlStr = `SELECT * FROM Notepad where id=${num};`
    9.         db.query(sqlStr, (err, results) => {
    10.         // 查询数据失败
    11.         if (err) {
    12.             return console.log(err.message)
    13.         } else {
    14.             res.render("index.ejs",{
    15.                 username: results[0].username,
    16.                 title:results[0].title,
    17.                 content: results[0].content,
    18.                 time: results[0].time,
    19.             })
    20.         }})
    21. })

    获取留言接口 

    1. // 获取评论
    2. app.get('/api/getlist',(req,res)=>{
    3.  
    4.     const sqlStr = 'select * from leaving'
    5.     db.query(sqlStr, (err, results) => {
    6.     // 失败
    7.     if (err) {
    8.         return console.log(err.message)
    9.     } 
    10.     res.send({
    11.         code: 200,
    12.         msg: '获取评论列表成功',
    13.         data: results,
    14.         username: req.session.user.username
    15.     })
    16. })
    17. })

    新增留言接口

    1. // 增加评论
    2. app.post('/api/addlist', (req, res) => { 
    3.  
    4.     let time = new Date()
    5.     // 获取到客户端通过查询字符串，发送到服务器的数据
    6.     // const sqlStr3 = `INSERT INTO leaving VALUES ('${body.text}');`
    7.     const sqlStr = `INSERT INTO leaving VALUES ('${req.session.user.username}','${req.body.content}','${time.toLocaleString()}');`
    8.     db.query(sqlStr, (err, results) => {
    9.     // 失败
    10.     if (err) {
    11.         return console.log(err.message)
    12.     } 
    13.     res.send({
    14.         status: 200,
    15.         msg: '添加数据成功',
    16.         data: results,
    17.         username: req.session.user.username
    18.     })
    19.     })
    20. })

    分页查询接口 

    1. app.post('/api/limit', (req, res) => {
    2.  
    3.     const sqlStr = `SELECT * FROM notepad LIMIT 10 OFFSET ${req.body.num};`
    4.     db.query(sqlStr, (err, results) => {
    5.     // 失败
    6.     if (err) {
    7.         return console.log(err.message)
    8.     } 
    9.     res.send({
    10.         status: 200,
    11.         msg: '分页查询成功',
    12.         data: results,
    13.     })
    14.     })
    15. })

    四、创建个人博客的页面

    登录页面   login.html

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>用户登录title>
    8.     <script src="./jQuery.mini.js">script>
    9.     <script src="./axios.js">script>
    10.     <link rel="shortcut icon" href="favicon.ico">
    11.     <style>
    12.         * {
    13.             margin: 0;
    14.             padding: 0;
    15.         }
    16.         html {
    17.             height: 100%;
    18.         }
    19.         body {
    20.             height: 100%;
    21.             background-image: url(../public/wallhaven-6k3lk6.jpg);
    22.         }
    23.         .container {
    24.             height: 100%;
    25.             background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
    26.         }
    27.         .login-wrapper {
    28.             background-color: #fff;
    29.             width: 358px;
    30.             height: 588px;
    31.             border-radius: 15px;
    32.             padding: 0 50px;
    33.             position: relative;
    34.             left: 50%;
    35.             top: 50%;
    36.             transform: translate(-50%, -50%);
    37.         }
    38.         .header {
    39.             font-size: 38px;
    40.             font-weight: bold;
    41.             text-align: center;
    42.             line-height: 200px;
    43.         }
    44.         .input-item {
    45.             display: block;
    46.             width: 100%;
    47.             margin-bottom: 20px;
    48.             border: 0;
    49.             padding: 10px;
    50.             border-bottom: 1px solid rgb(128, 125, 125);
    51.             font-size: 15px;
    52.             outline: none;
    53.         }
    54.         .input-item:placeholder {
    55.             text-transform: uppercase;
    56.         }
    57.         .login,.register {
    58.             text-align: center;
    59.             padding: 10px;
    60.             width: 100%;
    61.             margin-top: 40px;
    62.             background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
    63.             color: #fff;
    64.         }
    65.         .msg {
    66.             text-align: center;
    67.             line-height: 88px;
    68.         }
    69.  
    70.         a {
    71.             text-decoration-line: none;
    72.             color: #abc1ee;
    73.         }
    74.  
    75.         .box {
    76.             width: 5.333333333333333rem;
    77.             height: 4.8rem;
    78.             font-size: 1.173333333333333rem;
    79.         }
    80.  
    81.         @media (width:375px) {
    82.             html {
    83.                 font-size: 37.5px;
    84.             }
    85.         }
    86.  
    87.         /* 按钮当鼠标悬浮时的状态： */
    88.         .btn:hover{
    89.             transform: translateY(-3px);
    90.             box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    91.         }
    92.  
    93.         .btn {
    94.             transition: all .2s ;
    95.             border-radius: 10px;
    96.         }
    97.  
    98.         .tankuang{
    99.             display: none;
    100.             position: relative;
    101.             background: #a6c1ee;
    102.             z-index: 99;
    103.             width: 250px;
    104.             height: 100px;
    105.             text-align: center;
    106.             line-height: 100px;
    107.             border-radius: 5px;
    108.             top: 40%;
    109.             left: 50%;
    110.             transform: translate(-50%, -50%);
    111.         } 
    112.  
    113.         
    114.     style>
    115. head>
    116. <body>
    117.  
    118.     <div class="tankuang">
    119.         <div id="header">
    120.           <span style="color:#ffffff; font-size:20px;margin: auto;line-height: 50px;" id="layer_msg">span>
    121.         div>
    122.     div>
    123.  
    124.     <div class="container">
    125.         <div class="login-wrapper">
    126.             <div class="header">HELLO HANGdiv>
    127.             <div class="form-wrapper">
    128.                 <form action="" id="form_login">
    129.                     <input type="text" name="username" placeholder="账号" class="input-item" id="user">
    130.                     <input type="password" name="password" placeholder="密码" class="input-item" id="pwd">
    131.                     <div class="login btn">登录div>
    132.                     <div class="register btn">去注册div>
    133.                 form>
    134.             div>
    135.             <div class="msg">
    136.                 有问题?
    137.                 <a href="http://wpa.qq.com/msgrd?v=3&uin=26198573&site=qq&menu=13017388854">请联系站长a>
    138.             div>
    139.         div>
    140.     div>
    141.  
    142.     <script>
    143.         $(function() {
    144.             $('.login').click(function(e){
    145.                 e.preventDefault()
    146.                 var data = $('#form_login').serialize()
    147.                 $.post(
    148.                     'http://127.0.0.1/api/getUsername',
    149.                     data,
    150.                     function(res) {
    151.                         if (res.status == 400){
    152.                             document.querySelector('.tankuang').style.display = 'block',
    153.                             document.querySelector('.container').style.marginTop = '-100px'
    154.                             $('#layer_msg').text('账号不存在,请先注册')
    155.                             setTimeout(function(){
    156.                                 document.querySelector('.tankuang').style.display = 'none',
    157.                                 document.querySelector('.container').style.marginTop = '0px'
    158.                             },1000)
    159.                         } else if (res.status == 401) {
    160.                             document.querySelector('.tankuang').style.display = 'block',
    161.                             document.querySelector('.container').style.marginTop = '-100px'
    162.                             $('#layer_msg').text('密码错误,请重新登录')
    163.                             setTimeout(function(){
    164.                                 document.querySelector('.tankuang').style.display = 'none',
    165.                                 document.querySelector('.container').style.marginTop = '0px'
    166.                             },1000)
    167.                         } else {
    168.                             location.href = './index.html'
    169.                         }
    170.                     }
    171.                 )
    172.             })
    173.  
    174.             $(document).keyup(function(e){
    175.                 e.preventDefault()
    176.                 if (e.keyCode == '13') {
    177.                     var data = $('#form_login').serialize()
    178.                     $.post(
    179.                         'http://127.0.0.1/api/getUsername',
    180.                         data,
    181.                         function(res) {
    182.                             if (res.status == 400){
    183.                                 document.querySelector('.tankuang').style.display = 'block',
    184.                                 document.querySelector('.container').style.marginTop = '-100px'
    185.                                 $('#layer_msg').text('账号不存在,请先注册')
    186.                                 setTimeout(function(){
    187.                                     document.querySelector('.tankuang').style.display = 'none',
    188.                                     document.querySelector('.container').style.marginTop = '0px'
    189.                                 },1000)
    190.                             } else if (res.status == 401) {
    191.                                 document.querySelector('.tankuang').style.display = 'block',
    192.                                 document.querySelector('.container').style.marginTop = '-100px'
    193.                                 $('#layer_msg').text('密码错误,请重新登录')
    194.                                 setTimeout(function(){
    195.                                     document.querySelector('.tankuang').style.display = 'none',
    196.                                     document.querySelector('.container').style.marginTop = '0px'
    197.                                 },1000)
    198.                             } else {
    199.                                 location.href = './index.html'
    200.                             }
    201.                         }
    202.                     )
    203.                 }
    204.             })
    205.  
    206.             $('.register').click(function(e){
    207.                 e.preventDefault()
    208.                 location.href = './register.html'
    209.             })
    210.  
    211.         })
    212.     script>
    213. body>
    214. html>

    注册页面

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>用户注册title>
    8.     <script src="./jQuery.mini.js">script>
    9.     <script src="./axios.js">script>
    10.     <link rel="shortcut icon" href="favicon.ico">
    11.     <style>
    12.         * {
    13.             margin: 0;
    14.             padding: 0;
    15.         }
    16.         html {
    17.             height: 100%;
    18.         }
    19.         body {
    20.             height: 100%;
    21.             background-image: url(../public/wallhaven-6k3lk6.jpg);
    22.         }
    23.         .container {
    24.             height: 100%;
    25.             background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
    26.         }
    27.         .login-wrapper {
    28.             background-color: #fff;
    29.             width: 358px;
    30.             height: 588px;
    31.             border-radius: 15px;
    32.             padding: 0 50px;
    33.             position: relative;
    34.             left: 50%;
    35.             top: 50%;
    36.             transform: translate(-50%, -50%);
    37.         }
    38.         .header {
    39.             font-size: 38px;
    40.             font-weight: bold;
    41.             text-align: center;
    42.             line-height: 200px;
    43.         }
    44.         .input-item {
    45.             display: block;
    46.             width: 100%;
    47.             margin-bottom: 20px;
    48.             border: 0;
    49.             padding: 10px;
    50.             border-bottom: 1px solid rgb(128, 125, 125);
    51.             font-size: 15px;
    52.             outline: none;
    53.         }
    54.         .input-item:placeholder {
    55.             text-transform: uppercase;
    56.         }
    57.         .login,.register {
    58.             text-align: center;
    59.             padding: 10px;
    60.             width: 100%;
    61.             margin-top: 40px;
    62.             background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
    63.             color: #fff;
    64.         }
    65.         .msg {
    66.             text-align: center;
    67.             line-height: 88px;
    68.         }
    69.  
    70.         a {
    71.             text-decoration-line: none;
    72.             color: #abc1ee;
    73.         }
    74.  
    75.         .box {
    76.             width: 5.333333333333333rem;
    77.             height: 4.8rem;
    78.             font-size: 1.173333333333333rem;
    79.         }
    80.  
    81.         @media (width:375px) {
    82.             html {
    83.                 font-size: 37.5px;
    84.             }
    85.         }
    86.  
    87.         /* 按钮当鼠标悬浮时的状态： */
    88.         .btn:hover{
    89.             transform: translateY(-3px);
    90.             box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    91.         }
    92.  
    93.         .btn {
    94.             transition: all .2s ;
    95.             border-radius: 10px;
    96.         }
    97.  
    98.         .tankuang{
    99.             display: none;
    100.             position: relative;
    101.             background: #a6c1ee;
    102.             z-index: 99;
    103.             width: 250px;
    104.             height: 100px;
    105.             text-align: center;
    106.             line-height: 100px;
    107.             border-radius: 5px;
    108.             top: 40%;
    109.             left: 50%;
    110.             transform: translate(-50%, -50%);
    111.         } 
    112.  
    113.         
    114.     style>
    115. head>
    116. <body>
    117.  
    118.     <div class="tankuang">
    119.         <div id="header">
    120.           <span style="color:#ffffff; font-size:20px;margin: auto;line-height: 50px;" id="layer_msg">span>
    121.         div>
    122.     div>
    123.  
    124.     <div class="container">
    125.         <div class="login-wrapper">
    126.             <div class="header">REGISTERdiv>
    127.             <div class="form-wrapper">
    128.                 <form action="" id="form_login">
    129.                     <input type="text" name="username" placeholder="账号" class="input-item" id="user">
    130.                     <input type="password" name="password" placeholder="密码" class="input-item" id="pwd">
    131.                     
    132.                     <div class="register btn">注册div>
    133.                 form>
    134.             div>
    135.             <div class="msg">
    136.                 有问题?
    137.                 <a href="http://wpa.qq.com/msgrd?v=3&uin=26198573&site=qq&menu=13017388854">请联系站长a>
    138.             div>
    139.         div>
    140.     div>
    141.  
    142.     <script>
    143.         $(function() {
    144.  
    145.             $('.register').click(function(e){
    146.                 e.preventDefault()
    147.                 var data = $('#form_login').serialize()
    148.                 $.post(
    149.                     'http://192.168.30.71/api/register',
    150.                     data,
    151.                     function(res) {
    152.                         console.log(res);
    153.                         if(res.status == 200) {
    154.                             document.querySelector('.tankuang').style.display = 'block',
    155.                             document.querySelector('.container').style.marginTop = '-100px'
    156.                             $('#layer_msg').text('注册成功')
    157.                             setTimeout(function(){
    158.                                 location.href = './login.html'
    159.                             },1000)
    160.                         } else {
    161.                             document.querySelector('.tankuang').style.display = 'block',
    162.                             document.querySelector('.container').style.marginTop = '-100px'
    163.                             $('#layer_msg').text('账号已存在,请重新注册')
    164.                             setTimeout(function(){
    165.                                 document.querySelector('.tankuang').style.display = 'none',
    166.                                 document.querySelector('.container').style.marginTop = '0px'
    167.                             },1000)
    168.                         }
    169.                     }
    170.                 )
    171.             })
    172.         })
    173.     script>
    174. body>
    175. html>

    博客主页 index.html  可进行分页查询

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Documenttitle>
    8.   <script src="./jQuery.mini.js">script>
    9.   <link rel="stylesheet" href="./bootstrap.css">
    10.   <script src="./axios.js">script>
    11.   <style>
    12.  
    13.     body {
    14. 			background-repeat: no-repeat;
    15. 			background-size: cover;
    16.     }
    17.  
    18.     .navbar {
    19.       z-index: 99;
    20.     }
    21.  
    22.     .name {
    23.       display: flex;
    24.       justify-content: space-between;
    25.       float: right;
    26.       width: 26rem;
    27.       height: 100%;
    28.       font-size: .875rem;
    29.       color: #696767;
    30.       /* background-color: aqua; */
    31.     }
    32.  
    33.     .collapse {
    34.       width: 250px;
    35.       display: flex;
    36.       justify-content: space-around;
    37.     }
    38.  
    39.     .container {
    40.         width: 100%;
    41.         height: 100%;
    42.     }
    43.  
    44.     .listbig {
    45.       font-size: 18px;
    46.     }
    47.  
    48.     .list_a {
    49.       font-size: 16px;
    50.     }
    51.  
    52.     .limit {
    53.       text-align: center;
    54.     }
    55.  
    56.     .list-group {
    57.       height: 550px;
    58.     }
    59.  
    60.   style>
    61. head>
    62. <body>
    63.  
    64.     <nav class="navbar navbar-default">
    65.       <div class="container-fluid">
    66.         <div class="navbar-header">
    67.           <a class="navbar-brand" href="#">文章列表a>
    68.         div>
    69.         <ul class="nav navbar-nav">
    70.           <li><a href="./addarticle.html">添加文章 a>li>
    71.           <li><a href="./leaving.html">留言板 a>li>
    72.         ul>
    73.         <div class="collapse  navbar-right" id="bs-example-navbar-collapse-1">
    74.           <ul class="nav navbar-nav ">
    75.             <li><a href="#" class="user">a>li>
    76.           ul>
    77.           <ul class="nav navbar-nav ">
    78.             <li><a href="#" id="btnLogout">退出登录a>li>
    79.           ul>
    80.         div>
    81.       div>
    82.     nav>
    83.     <div class="list-group">
    84.       <a href="#" class="list-group-item active listbig">
    85.         文章列表
    86.       a>
    87.     div>
    88.  
    89.     <nav aria-label="Page navigation" class="limit">
    90.       <ul class="pagination">
    91.         <li><a href="#" id="1">1a>li>
    92.         <li><a href="#" id="2">2a>li>
    93.         <li><a href="#" id="3">3a>li>
    94.         <li><a href="#" id="4">4a>li>
    95.         <li><a href="#" id="5">5a>li>
    96.       ul>
    97.     nav>
    98.  
    99.   <script>
    100.     $(function () { 
    101.       // 点击文章列表切换页面
    102.       $('.list-group').on('click', 'a', function(e){
    103.         // 获取点击文字的id值
    104.         var list_id = e.target.id 
    105.         // 获取文章列表进行文章筛选
    106.         axios({
    107.           method: 'GET',
    108.           url: 'http://127.0.0.1/api/getArticle',
    109.         }).then(function(res) {
    110.             // console.log(list_id);
    111.             var data = {id: list_id}
    112.               // 筛选文章
    113.               axios({
    114.                 method: 'POST',
    115.                 data,
    116.                 url: 'http://127.0.0.1/api/search',
    117.               }).then(function(res) {
    118.                 if (res.data.status == 200) {
    119.                   console.log(res.data);
    120.                   console.log(res.data.data.content);
    121.                 } else {
    122.                   alert('文章不存在!')
    123.                 }
    124.               })
    125.               
    126.           })
    127.       })
    128.  
    129.       // 获取用户名判断是否登录
    130.       $.get(
    131.         'http://127.0.0.1/api/username',
    132.         function(res) {
    133.           // console.log(res);
    134.           if (res.status == 200) {  
    135.             let username = res.username
    136.             $('.user').text(username)
    137.             let data = {num: 0}
    138.                   // 获取文章列表
    139.                   axios({
    140.                     method: 'POST',
    141.                     data,
    142.                     url: 'http://127.0.0.1/api/limit',
    143.                   }).then(function(res) {
    144.                     // 将获取到的文章渲染到页面 作为初始页面
    145.                     res.data.data.map(item => {
    146.                       let a = `${item.id}_id" target="_blank" class="list-group-item  list_a" id="${item.id}">${item.title} 
       用户 ${item.username} 发布于 ${item.time}
             `
    147.                       $('.list-group').append(a)
    148.                     })
    149.                   })
    150.           } else {
    151.             alert('请先完成登录')
    152.             location.href = './login.html'
    153.           }
    154.         }
    155.       )
    156.  
    157.       // 退出登录
    158.       $('#btnLogout').click(function() {
    159.         $.post(
    160.           'http://127.0.0.1/api/register',
    161.           function(res) {
    162.             if (res.status == 200) {
    163.               // 如果 status 为 200，则表示退出成功，重新跳转到登录页面
    164.               location.href = './login.html'
    165.             }
    166.           }
    167.         )
    168.       })
    169.  
    170.       // 分页查询
    171.       $('.limit').on('click', 'li', function(e){
    172.         let data = {num: parseInt((e.target.id-1) * 10)}
    173.         axios({
    174.             method: 'POST',
    175.             data,
    176.             url: 'http://127.0.0.1/api/limit',
    177.         }).then(function(res) {
    178.             if (res.data.status == 200) {
    179.                   $('.list-group').empty('')
    180.                   $('.list-group').append('文章列表')
    181.                   res.data.data.map(item => {
    182.                   let a = `${item.id}_id" target="_blank" class="list-group-item  list_a" id="${item.id}">${item.title} 
       用户 ${item.username} 发布于 ${item.time}
             `
    183.                   $('.list-group').append(a)
    184.                   })
    185.             } else {
    186.               alert('查询失败!')
    187.             }
    188.         })
    189.       })
    190.  
    191.     })
    192.   script>
    193. body>
    194.  
    195. html>

    添加文章的页面 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <script src="./jQuery.mini.js">script>
    8.     <link rel="stylesheet" href="./bootstrap.css">
    9.     <script src="./axios.js">script>
    10.  
    11.     <style>
    12.         * {
    13.             margin: 0;
    14.             padding: 0;
    15.         }
    16.         html {
    17.             height: 1200px;
    18.         }
    19.         body {
    20.             height: 1200px;
    21.         }
    22.         .container {
    23.             width: 100%;
    24.             height: 100%;
    25.             /* background-image: linear-gradient(to right, #26453d, #0b1013); */
    26.             /* background-image: linear-gradient(to right, #a7a8bd, #2e317c); */
    27.             background-image: linear-gradient(to bottom, #a7a8bd, #2e317c);
    28.  
    29.         }
    30.         .login-wrapper {
    31.             background-color: #fff;
    32.             width: 700px;
    33.             height: 900px;
    34.             border-radius: 15px;
    35.             padding: 0 50px;
    36.             position: relative;
    37.             text-align: center;
    38.             margin: 0 auto;
    39.             /* left: 50%;
    40.             top: 50%;
    41.             transform: translate(-50%, -50%); */
    42.         }
    43.         .header {
    44.             font-size: 38px;
    45.             font-weight: bold;
    46.             text-align: center;
    47.             line-height: 80px;
    48.         }
    49.         .input-item {
    50.             display: block;
    51.             width: 100%;
    52.             margin-bottom: 20px;
    53.             border: 0;
    54.             padding: 10px;
    55.             border-bottom: 1px solid rgb(128, 125, 125);
    56.             font-size: 15px;
    57.             outline: none;
    58.         }
    59.         .input-item:placeholder {
    60.             text-transform: uppercase;
    61.         }
    62.  
    63.         /* .navbar {
    64.           margin-top: -100px;
    65.         } */
    66.  
    67.         .btn {
    68.             text-align: center;
    69.             padding: 10px;
    70.             width: 100%;
    71.             margin-top: 40px;
    72.             background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
    73.         }
    74.         .msg {
    75.             text-align: center;
    76.             line-height: 200px;
    77.         }
    78.         a {
    79.             text-decoration-line: none;
    80.             color: #abc1ee;
    81.         }
    82.  
    83.         /* 按钮当鼠标悬浮时的状态： */
    84.         .btn:hover{
    85.             transform: translateY(-3px);
    86.             box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    87.         }
    88.  
    89.         .btn {
    90.             transition: all .2s ;
    91.             border-radius: 10px;
    92.         }
    93.  
    94.       .tankuang{
    95.         display: none;
    96.         position: relative;
    97.         background: #305a56;
    98.         z-index: 99;
    99.         width: 200px;
    100.         height: 100px;
    101.         text-align: center;
    102.         line-height: 100px;
    103.         border-radius: 5px;
    104.         top: 30%;
    105.         left: 50%;
    106.         transform: translate(-50%, -50%);
    107.       } 
    108.     style>
    109. head>
    110. <body>
    111.  
    112.   <div class="tankuang">
    113.     <div id="header">
    114.       <span style="color:#ffffff; font-size:20px;margin: auto;line-height: 50px;" id="layer_msg">提交成功...span>
    115.     div>
    116.   div>
    117.  
    118.   <nav class="navbar navbar-default">
    119.     <div class="container-fluid">
    120.       <div class="navbar-header">
    121.         <a class="navbar-brand" href="./index.html">返回主页a>
    122.       div>
    123.       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    124.         <ul class="nav navbar-nav navbar-right">
    125.           <li><a href="#" id="btnLogout">退出登录a>li>
    126.         ul>
    127.       div>
    128.     div>
    129.   nav>
    130.  
    131.     <div class="container">
    132.         <div class="login-wrapper">
    133.             <div class="header">写文章div>
    134.                 <form id="form_add">
    135.                   <div class="form-wrapper">
    136.                     <div class="input-group">
    137.                       <span class="input-group-addon" id="basic-addon3" >文章标题span>
    138.                       <input type="text" class="form-control" id="basic-url" name="title" aria-describedby="basic-addon3">
    139.                     div>
    140.                     <h3>文章内容h3>
    141.                     <textarea class="form-control" rows="18" name="content" style="font-size: 16px;">textarea>
    142.                     <div class="btn">发布文章div>
    143.                 div>
    144.                 form>
    145.             <div class="msg">
    146.               有问题?
    147.               <a href="http://wpa.qq.com/msgrd?v=3&uin=26198573&site=qq&menu=13017388854">请联系站长a>
    148.           div>
    149.         div>
    150.     div>
    151.  
    152.     <script>
    153.         $(function(){
    154.         // 发布文章
    155.           $('.btn').click(function(e){
    156.               e.preventDefault()
    157.               var data = $('#form_add').serialize()
    158.               axios({
    159.                 method: 'POST',
    160.                 url: 'http://127.0.0.1/api/addArticle',
    161.                 data
    162.               }).then(function(res){
    163.                 if (res.data.status == 201) {
    164.                   document.querySelector('.tankuang').style.display = 'block',
    165.                   document.querySelector('.navbar').style.marginTop = '-100px'
    166.                   setTimeout(function(){
    167.                     location.href = './index.html'
    168.                   },800)
    169.                 } else {
    170.                   alert('文章发布失败')
    171.                 }
    172.               })
    173.           })
    174.  
    175.           // 获取用户名判断是否登录
    176.           $.get(
    177.             'http://127.0.0.1/api/username',
    178.             function(res) {
    179.               console.log(res);
    180.               if (res.status == 200) {
    181.                 // alert('登陆成功!欢迎'+res.username)
    182.               } else {
    183.                 alert('请先完成登录')
    184.                 location.href = './login.html'
    185.               }
    186.             }
    187.           )
    188.  
    189.           // 退出登录
    190.           $('#btnLogout').click(function() {
    191.             $.post(
    192.               'http://127.0.0.1/api/register',
    193.               function(res) {
    194.                 if (res.status == 200) {
    195.                   // 如果 status 为 200，则表示退出成功，重新跳转到登录页面
    196.                   location.href = './login.html'
    197.                 }
    198.               }
    199.             )
    200.           })
    201.         })
    202.     script>
    203. body>
    204. html>

     渲染文章的页面,使用的ejs     index.ejs

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <script src="./jQuery.mini.js">script>
    6.     <script src="./axios.js">script>
    7.     <title>Titletitle>
    8.  
    9.     <style>
    10.         * {
    11.             margin: 0;
    12.             padding: 0;
    13.         }
    14.         html {
    15.             height: 1400px;
    16.         }
    17.         body {
    18.             height: 1400px;
    19.         }
    20.         .container {
    21.             height: 100%;
    22.             /* background-image: linear-gradient(to right, #999999, #330867); */
    23.             /* background-image: linear-gradient(to right, #b5caa0, #1b813e); */
    24.             background-image: linear-gradient(to bottom, #91b493, #096148);
    25.         }
    26.         .login-wrapper {
    27.             background-color: #fff;
    28.             width: 800px;
    29.             /* height: 1200px; */
    30.             border-radius: 15px;
    31.             padding: 0 50px;
    32.             position: relative;
    33.             text-align: center;
    34.             margin: 0 auto;
    35.             /* left: 50%;
    36.             top: 50%;
    37.             transform: translate(-50%,-50%); */
    38.  
    39.             /* table-layout:fixed;  */
    40.             /* word-break:break-all;  */
    41.             /* overflow:hidden; */
    42.             /* word-break: break-all;word-wrap: break-word; */
    43.  
    44.         }
    45.         .header {
    46.             font-size: 38px;
    47.             font-weight: bold;
    48.             text-align: center;
    49.             line-height: 100px;
    50.         }
    51.  
    52.         .other {
    53.             font-size: 14px;
    54.             line-height: 30px;
    55.             color: #696767;;
    56.         }
    57.  
    58.         /* div{ word-wrap: break-word; word-break: normal;} */
    59.  
    60.         .content {
    61.             overflow: hidden;
    62.             text-indent: 2rem;
    63.             text-align: left;
    64.             margin: 30px auto;
    65.             width: 700px;
    66.             /* height: 900px; */
    67.             line-height: 1rem;
    68.             /* background-color: #abc1ee; */
    69.             word-break: break-all;
    70.             word-wrap: break-word;
    71.             table-layout:fixed;
    72.         }
    73.  
    74.  
    75.         .msg {
    76.             text-align: center;
    77.             line-height: 200px;
    78.         }
    79.         
    80.         a {
    81.             text-decoration-line: none;
    82.             color: #abc1ee;
    83.         }
    84.     style>
    85. head>
    86. <body>
    87.     <div class="container">
    88.         <div class="login-wrapper">
    89.             <div class="header"><%- title %>div>
    90.             <div class="other">
    91.                 <div class="name">用户: <%- username %>div>
    92.                 <div class="time"><%- time %>div>
    93.             div>
    94.             <div class="content">
    95.                 
    96.                 |<pre><%- content %>pre>
    97.             div>
    98.             <div class="msg">
    99.                 有问题?
    100.                 <a href="http://wpa.qq.com/msgrd?v=3&uin=26198573&site=qq&menu=13017388854">请联系站长a>
    101.             div>
    102.         div>
    103.     div>
    104.  
    105.     <script>
    106.             // 获取用户名判断是否登录
    107.             $.get(
    108.                 'http://127.0.0.1/api/username',
    109.                 function(res) {
    110.                 console.log(res);
    111.                 if (res.status == 200) {
    112.                     // alert('登陆成功!欢迎'+res.username)
    113.                 } else {
    114.                     alert('请先完成登录')
    115.                     location.href = './login.html'
    116.                 }
    117.                 }
    118.             )
    119.  
    120.     script>
    121.  
    122. body>
    123. html>

    留言板，用于展示留言，添加留言

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <script src="./jQuery.mini.js">script>
    8.     <link rel="stylesheet" href="./bootstrap.css">
    9.     <script src="./axios.js">script>
    10.  
    11.     <style>
    12.         * {
    13.             margin: 0;
    14.             padding: 0;
    15.         }
    16.  
    17.         .container {
    18.             width: 100%;
    19.             height: 100%;
    20.             background-image: linear-gradient(to bottom, #f9f4dc, #ecb88a);
    21.  
    22.         }
    23.         .login-wrapper {
    24.             background-color: #fff;
    25.             width: 700px;
    26.             /* height: 900px; */
    27.             border-radius: 15px;
    28.             padding: 0 50px;
    29.             position: relative;
    30.             text-align: center;
    31.             margin: 0 auto;
    32.             /* left: 50%;
    33.             top: 50%;
    34.             transform: translate(-50%, -50%); */
    35.         }
    36.         .header {
    37.             font-size: 38px;
    38.             font-weight: bold;
    39.             text-align: center;
    40.             line-height: 80px;
    41.         }
    42.         .input-item {
    43.             display: block;
    44.             width: 100%;
    45.             margin-bottom: 20px;
    46.             border: 0;
    47.             padding: 10px;
    48.             border-bottom: 1px solid rgb(128, 125, 125);
    49.             font-size: 15px;
    50.             outline: none;
    51.         }
    52.         .input-item:placeholder {
    53.             text-transform: uppercase;
    54.         }
    55.  
    56.         .btn {
    57.             text-align: center;
    58.             padding: 10px;
    59.             width: 100%;
    60.             margin-top: 40px;
    61.             background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
    62.         }
    63.         .msg {
    64.             text-align: center;
    65.             line-height: 200px;
    66.         }
    67.         a {
    68.             text-decoration-line: none;
    69.             color: #abc1ee;
    70.         }
    71.  
    72.         /* 按钮当鼠标悬浮时的状态： */
    73.         .btn:hover{
    74.             transform: translateY(-3px);
    75.             box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    76.         }
    77.  
    78.         .btn {
    79.             transition: all .2s ;
    80.             border-radius: 10px;
    81.         }
    82.  
    83.     style>
    84. head>
    85. <body>
    86.  
    87.     <div class="tankuang">
    88.         <div id="header">
    89.           <span style="color:#ffffff; font-size:20px;margin: auto;line-height: 50px;" id="layer_msg">span>
    90.         div>
    91.     div>
    92.  
    93.     <nav class="navbar navbar-default">
    94.         <div class="container-fluid">
    95.           <div class="navbar-header">
    96.             <a class="navbar-brand" href="./index.html">返回主页a>
    97.           div>
    98.           <div class="collapse navbar-right" id="bs-example-navbar-collapse-1">
    99.             <ul class="nav navbar-nav ">
    100.                 <li><a href="#" class="user">123123a>li>
    101.             ul>
    102.             <ul class="nav navbar-nav">
    103.               <li><a href="#" id="btnLogout">退出登录a>li>
    104.             ul>
    105.           div>
    106.         div>
    107.       nav>
    108.     
    109.         <div class="container">
    110.             <div class="login-wrapper">
    111.                 <div class="header">留言板div>
    112.                     <form id="form_add">
    113.                       <div class="form-wrapper">
    114.                         <ul class="list-group">
    115.                             
    116.                         ul>
    117.                         
    118.                         <textarea class="form-control" rows="10" name="content" style="font-size: 16px;">textarea>
    119.                         <div class="btn">发布留言div>
    120.                     div>
    121.                     form>
    122.                 <div class="msg">
    123.                   有问题?
    124.                   <a href="http://wpa.qq.com/msgrd?v=3&uin=26198573&site=qq&menu=13017388854">请联系站长a>
    125.               div>
    126.             div>
    127.         div>
    128.     
    129.     <script>
    130.         $(function(){
    131.         // 发布留言
    132.             $('.btn').click(function(e){
    133.                 e.preventDefault()
    134.                 var data = $('#form_add').serialize()
    135.                 axios({
    136.                 method: 'POST',
    137.                 url: 'http://127.0.0.1/api/addlist',
    138.                 data
    139.                 }).then(function(res){
    140.                 if (res.data.status == 200) {
    141.                         // 刷新页面
    142.                         location.reload();
    143.                 } else {
    144.                     alert("评论发布失败")
    145.                 }
    146.                 })
    147.             })
    148.  
    149.             // 获取用户名判断是否登录
    150.             $.get(
    151.                 'http://127.0.0.1/api/username',
    152.                 function(res) {
    153.                 // console.log(res);
    154.                 if (res.status == 200) {  
    155.                     let username = res.username
    156.                         // 获取文章列表
    157.                         axios({
    158.                             method: 'GET',
    159.                             url: 'http://127.0.0.1/api/getlist',
    160.                         }).then(function(res) {
    161.                             // 将获取到的文章渲染到页面
    162.                             res.data.data.map(item => {
    163.                             $('.user').text(username)
    164.                             let li = `
    165.
  • ${item.content}
  • ${item.username}
    • `
  • $('.list-group').append(li)
  • })
  • })
  • } else {
  • alert('请先完成登录')
  • location.href = './login.html'
  • }
  • }
  • )
  • // 退出登录
  • $('#btnLogout').click(function() {
  • $.post(
  • 'http://127.0.0.1/api/register',
  • function(res) {
  • if (res.status == 200) {
  • // 如果 status 为 200，则表示退出成功，重新跳转到登录页面
  • location.href = './login.html'
  • }
  • }
  • )
  • })
  • })
  • script>
  • body>
  • html>

    • 五、展示个人博客页面

    登陆页面

    注册页面 

    博客主页 

      添加文章页面

    文章详细页面

    留言板 

    至此,我的个人博客大致完成,后续将会继续改进

  • 相关阅读:
    优酷新国风动漫《少年歌行海外仙山篇》开播,热血集结开启新冒险
    springboot实现websocket客户端断线重连
    来自阿里P8互联网面试官的夺命连环60问，Git命令面试简直是教科式天花板
    从源码角度分析Mybatis级联映射的实现原理
    C++异常处理的优缺点[重要]
    H3C 防火墙策略
    汇编-ARMv8架构指令集
    QQ恢复聊天记录，就用这3个方法！
    Django之图谱查询与标注平台
    神经网络中神经元的权重更新
  • 原文地址：https://blog.csdn.net/weixin_45932821/article/details/127854901