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 已启动');
});标签：flex,const,nodejs,简陋,博客,width,res,font,margin 来源： https://blog.csdn.net/weixin_49900157/article/details/120599919