nodejs个人博客（很简陋，写的比较差）

2021/10/4 1:10:51

编程Tag： nodejs const Font width flex 博客 margin res 简陋

本文主要是介绍nodejs个人博客（很简陋，写的比较差），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

新建blog数据库，新建blog,userinfo两个表，blog表有title，content,date三个字段，userinfo有id,password两个字段

结构：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="view/index/index.css">
</head>
<body>
    <div id="top" class="top">
        <div class="logo">God Liu</div>
        <div class="funcs">
            <div class="func">
                <a href="/">首页</a>
            </div>
            <div class="func">
                <a href="/toWrite">写博客</a>
            </div>
            <div id="signin" class="func">
                <a href="/toSignin">登录</a>
            </div>
        </div>
    </div>
    <div class="background">
        <div class="text">GODLIU的个人博客网站</div>
        <div class="line"></div>
    </div>
    <div id="blogs" class="blogs">
        <div v-for="blog in blogs" class="blog">
            <div class="title">{{blog.title}}</div>
            <div class="line"></div>
            <div class="content">{{blog.content}}</div>
            <div class="line"></div>
            <div class="date">{{blog.date}}</div>
        </div>
    </div>

    <script src="https://unpkg.com/vue@3.2.19/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="view/index/index.js"></script>
</body>
</html>

index.css

body {
    width: 100vw;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(220, 220, 220, 0.5);
}
a:link {
    color: black;
}
a:visited {
    color: black;
}
a {
    text-decoration: none;
}

.top {
    height: 70px;
    width: 100vw;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top .logo {
    margin-left: 20px;

    font-size: 40px;
    font-weight: bolder;
    font-style: italic;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.top .funcs{

    display: flex;
    margin-right: 10px;

    font-size: 20px;
    font-weight: bold;

}
.top .funcs .func {
    margin: 0 15px;
}

.background {
    height: 230px;
    width: 100vw;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-image: linear-gradient(to right, #a8edea 0%, #fed6e3 100%);
}
.background .text {
    margin-bottom: 20px;

    color: white;
    font-size: 30px;
}
.background .line {
    height: 2px;
    width: 60px;

    background: white;
}

.blogs {
    width: 100vw;

    padding: 0 120px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.blog {
    height: 200px;
    width: 35vw;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 20px;

    background: white;
    border-radius: 10px;
}
.blog .line {
    width: 30vw;
    height: 2px;

    margin-left: 30px;
    background: rgba(220, 220, 220, 0.5);
}
.blog .title {
    height: 35px;

    padding:10px 0 0 30px;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: bold;
    word-break: keep-all;
    overflow: hidden;
}
.blog .content {
    height: 100px;
    padding-left: 30px;
}
.blog .date {
    height: 20px;
    padding-left: 30px;

    font-size: 10px;
    color: grey;
}

index.js

const blogs = Vue.createApp({
    data() {
        return {
            blogs: []
        }
    },
    created() {
        axios.get('/blogs').then(res => {
            this.blogs = res.data;
        });
    }
});
blogs.mount('#blogs')

signin.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="view/signin/signin.css">
</head>

<body>
    <div id="top" class="top">
        <div class="logo">God Liu</div>
        <div class="funcs">
            <div class="func">
                <a href="/">首页</a>
            </div>
            <div class="func">
                <a href="/write">写博客</a>
            </div>
            <div id="signin" class="func">
                <a href="/toSignin">登录</a>
            </div>
        </div>
    </div>
    <div class="background">
        <div class="text">Welcome</div>
        <div id="form" class="form">
            <div class="inputs">
                <input type="text" placeholder="账号" v-model="id">
                <input type="password" placeholder="密码" v-model="password">
            </div>
            <button class="signin" @click="signin">登录</button>
        </div>
    </div>

    <script src="https://unpkg.com/vue@3.2.19/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="view/signin/signin.js"></script>
</body>

</html>

signin.css

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(220, 220, 220, 0.5);
}

a:link {
    color: black;
}
a:visited {
    color: black;
}
a {
    text-decoration: none;
}

.top {
    height: 70px;
    width: 100vw;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top .logo {
    margin-left: 20px;

    font-size: 40px;
    font-weight: bolder;
    font-style: italic;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.top .funcs{

    display: flex;
    margin-right: 10px;

    font-size: 20px;
    font-weight: bold;

}
.top .funcs .func {
    margin: 0 15px;
}
.background {
    height: 200px;
    width: 300px;

    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    background-image: linear-gradient(to right, #a8edea 0%, #fed6e3 100%);
    border-radius: 5px;
}

.text {
    margin-top: 10px;

    font-size: 30px;
    font-style: italic;
    color: white;
}

.form {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.inputs {
    width: 210px;

    margin-top: 20px;
}
.inputs input {
    height: 25px;
    width: 210px;
    margin: 5px 0;

    border-width: 0;
    outline: none;
    border-radius: 2px;
    font-weight: bold;
}

.signin {
    width: 45px;
    height: 25px;

    margin-top: 10px;

    outline: none;
    border-width: 0;
    background: white;
    border-radius: 2px;
    font-weight: bold;
    color: grey;
}

signin.js

const app = Vue.createApp({
    data() {
        return {
            id: '',
            password: ''
        };
    },
    methods: {
        signin() {
            axios.post('/signin', {
                id: this.id,
                password: this.password
            }).then(res => {
                if(res.data) {
                    alert('登录成功');
                    window.location.replace('/');
                } else {
                    alert('账号不存在或密码错误');
                }
            });
        },
        signup() {
            axios.post('/signup', {
                id: this.id,
                password: this.password
            }).then(res => {
                if(res.data) {
                    alert('注册成功');
                    window.location.replace('/');
                } else {
                    alert('账号已被注册');
                }
            })
        }
    }
})

app.mount('#form');

write.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="view/write/write.css">
</head>
<body>
    <div id="top" class="top">
        <div class="logo">God Liu</div>
        <div class="funcs">
            <div class="func">
                <a href="/">首页</a>
            </div>
            <div class="func">
                <a href="/write">写博客</a>
            </div>
            <div id="signin" class="func">
                <a href="/toSignin">登录</a>
            </div>
        </div>
    </div>
    <div id="form" class="form">
        <input class="title" type="text" placeholder="标题" v-model="title">
        <textarea cols="150" rows="30" v-model="text"></textarea>
        <button @click="submit">提交</button>
    </div>

    <script src="https://unpkg.com/vue@3.2.19/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="view/write/write.js"></script>
</body>
</html>

write.css

body {
    width: 100vw;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: linear-gradient(to right, #a8edea 0%, #fed6e3 100%);
}

a:link {
    color: black;
}
a:visited {
    color: black;
}
a {
    text-decoration: none;
}

.top {
    height: 70px;
    width: 100vw;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top .logo {
    margin-left: 20px;

    font-size: 40px;
    font-weight: bolder;
    font-style: italic;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.top .funcs{

    display: flex;
    margin-right: 10px;

    font-size: 20px;
    font-weight: bold;

}
.top .funcs .func {
    margin: 0 15px;
}

.form {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.form .title{
    height: 35px;
    width: 400px;

    margin-bottom: 15px;

    font-weight: bolder;
    font-size: 20px;
    outline: none;
    border-width: 0;
    border-radius: 5px;
}
.form textarea{
    font-weight: bold;
    outline: none;
    border-width: 0;
    border-radius: 10px;
}
.form button {
    width: 50px;
    height: 28px;

    margin-top: 20px;

    outline: none;
    border-width: 0;
    background: white;
    border-radius: 5px;
    font-weight: bold;
    color: grey;
}

write.js

const app = Vue.createApp({
    data() {
        return {
            title: '',
            text: ''
        }
    },
    methods: {
        submit() {
            axios.post('/write', {
                title: this.title,
                text: this.text
            }).then(res => {
                if(res.body) {
                    alert('提交成功');
                } else {
                    alert('提交成功');
                }
            });
        }

    }
});

app.mount('#form');

server.js

const express = require('express');
const fs = require('fs');
const bodyParser = require('body-Parser');
const mysql = require('mysql');

const app = express();

app.use('/view', express.static('view'));
app.use(bodyParser.json());

app.get('/', (req, res) => {
    fs.readFile('view/index/index.html', (err, data) => {
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.end(data);
    })
});


app.get('/toSignin', (req, res) => {
    fs.readFile('view/signin/signin.html', (err, data) => {
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.end(data);
    })
});

app.post('/signin', (req, res) => {
    const connection = mysql.createConnection({
        user: 'root',
        password: 'qwertyuiop123A',
        database: 'blog'
    });
    connection.connect();
    const id = req.body.id;
    const password = req.body.password;

    const statement = "SELECT id, password FROM userinfo WHERE id=? AND password=?";
    const params = [id, password];
    connection.query(statement, params, (err, result) => {
        if (result.length == 0) {
            res.send(false);
        } else {
            res.send(true);
        }
        connection.end();
    })
});


app.get('/blogs', (req, res) => {
    const connection = mysql.createConnection({
        user: 'root',
        password: 'qwertyuiop123A',
        database: 'blog'
    });
    connection.connect();
    const id = req.body.id;
    const password = req.body.password;

    const statement = "SELECT * FROM blog";
    connection.query(statement, (err, result) => {
        res.send(result);
        connection.end();
    });
});
app.get('/toWrite', (req, res) => {
    fs.readFile('view/write/write.html', (err, data) => {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end(data);
    })
});

app.post('/write', (req, res) => {
    const connection = mysql.createConnection({
        user: 'root',
        password: 'qwertyuiop123A',
        database: 'blog'
    });
    connection.connect();

    const title = req.body.title;
    const text = req.body.text;

    const statement = "INSERT INTO blog (title, content, date) VALUES (?, ?, ?)";
    const params = [title, text, new Date()];
    connection.query(statement, params, (err, result) => {
        if(err) {
            res.send(false);
        } else {
            res.send(true);
        }
        connection.end();
    })
});

app.listen(8080, () => {
    console.log('Server 已启动');
});

这篇关于nodejs个人博客（很简陋，写的比较差）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！