node零基础开发个人博客新手篇 express+node（一）

最新推荐文章于 2022-11-14 21:14:55 发布

农村落魄小青年

最新推荐文章于 2022-11-14 21:14:55 发布

阅读量266

点赞数

文章标签： javascrpit node express 个人博客

本文链接：https://blog.csdn.net/weixin_42039715/article/details/100144458

版权

先发一段node基础代码

node中的异步I/O php是同步阻塞方式

前端编程算是gui编程一种构成node的基调是事件驱动和单线程

代表nginx

服务器四个事件 listening 调用server。listen绑定端口抽发

connection 客户端套接字连接到服务器端时出发

close 服务器关闭时触发 error服务器发生异常时触发

入门代码

var http =require('http');

http.createServer(function (request, response) {

response.writeHead(200,{

'Content-Type': 'text/plain'

});

response.end('Hello World\n');

}).listen(3000);

console.log('Server running at nihao');

回归正题

首先我们快速生成一个项目，使用express

npm install -g express -generator
express -e blog 
npm install 
npm install normalize.css

然后在app。js中添加以下代码

app.listen(3000,function(){
console.log('listening port 3000' );
}
)

然后输入node app命令启动项目

我们需要一个前端的登录界面，保证用户可以使用，

在项目的rout子文件下的index.js中写入代码

router.get('/login",function(req,res,next){
res.render('login')
})

接下来撸一个登录的页面和相关的样式

<!DOCTYPE html>
<html lang="zh-cn" class="login">
  <head>
    <meta charset="utf-8">
    <title>node的个人博客</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="description" content="Node个人博客第一版为了复习以前的知识写的">
    <meta name="keywords" content="Node复习。。。">

  </head>
  <link rel='stylesheet' href='article/stylesheets/normalize.css' />
  <link rel="stylesheet" href="article/stylesheets/main.css"  />

  <body>

    <section>
      <form action ="/login" method="post">
        <div class="form-group">
         <input type="text" name="name" placeholder="登录名">
        </div>
        <div class="form-group">
          <input type="password" name="password" placeholder="密码">
          <%if (message) {%>
          <p><%=message%></p>
          <%}%>
        </div>
        <div class="form-group">
          <input type="submit" value="登录">
        </div>
      </form>
    </section>
  <footer>
    <p>
      Copyright @2016 Node
    </p>
    <p>
      Powered by Express
    </p>
  </footer>
  </body>
<style>
  .login body{
    background-image: url("../images/login.jpg");
    background-size:100% 100% ;
    background-repeat:no-repeat ;
  }
</style>
</html>
和相关的样式
a{
    text-decoration: none;
    color: #000;
}
ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
}
.floatfix:after{
    content: '';
    display: block;
    clear: both;
}
.floatfix{
    *zoom:1
}
body{
    background: #f0f0f0;
}
/*
登陆界面样式
 */
.login, .login body{
    height: 100%;
    width: 100%;
}
/*.login body{*/
     /*background-image: url("../images/login.jpg");*/
     /*background-size:100% 100% ;*/
     /*background-repeat:no-repeat ;*/
 /*}*/
.login .form-group{
    padding-bottom: 30px;
}
.form-group input{
    height: 24px;
}
footer p{
    text-align: center;
    line-height: 1.5em;
    margin: 0;
}
.form-group, .text-group{
    padding: 0 20px 10px;
}
.form-group{
    height: 40px;
}
.form-group label{
    width: 43px;
    text-align: right;
    display: inline-block;
}
.form-group input{
    border: 1px solid #c0c0c0;
    border-radius: 3px ;
    padding: 6px 5px;
    margin-left: 20px;
}
.text-group textarea{
    height: 820px;
}
.text-group label{
    vertical-align: top;
}
.login .form-group p {
    margin: 0;
    font-size: 12px;
    color: #d20505;
    line-height: 20px;
}
.login form{
    width: 320px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -160px;
    margin-top: -125px;
}
.login form input{
    width: 275px;
    background: #fff;
    margin: 0;
}
.login form input[type='submit'] {
    width: 90px;
    display: block;
    margin: 0 auto;
    height: 40px;
    background: #183d8e;
    color: #fff;
    cursor: pointer;
}
.login footer{
    position: absolute;
    bottom: 20px;
    display: block;
    width: 100%;
}

/*
首页样式
 */
header{
    height: 135px;
    background-image: url("../images/login.jpg");
    background-position:center ;
    margin-bottom: 25px;
}
header h1{
    margin: 0;
    text-align: center;
    color: #fff;
    font-size: 30px;
    line-height: 35px;
    padding: 50px 0;
    word-spacing: 0.5em;
}
.main{
    padding: 0 15px;
    width: 1170px;
    margin: 0 auto;
    margin-bottom: 25px;
}
aside{
    width: 180px;
    padding: 9px;
    border: 1px solid #c0c0c0;
    float: left;
    min-height: 450px;
    height: 100%;
}
aside ul li{
    list-style: none;
    height: 30px;
    text-align: center;
}
aside ul li a{
    font-size: 16px;
    line-height: 30px;
}
aside ul li a:hover{
    color: #183d8e;
}
.main-aside-avatar{
    margin-bottom: 10px;
}
.main-aside-avatar img{
    width: 100%;
}
.main-articles{
    margin-left: 220px;
}
.main-articles-item{
    height: 80px;
    border: 1px solid #c0c0c0;
    padding: 10px;
    margin-bottom: 10px;
}
.main-articles-item:last-child{
    margin-bottom: 0;
}
.main-articles-item h2{
    margin: 0;
    font-weight: normal;
    font-size: 24px;
    line-height: 40px;
}
.main-articles-items-des span{
    padding-right: 8px;
    color: #333;
    font-size: 14px;
}
/*
加入简单的动效
 */
@keyframes move {
    from {
        transform: translate(0px,0);
    }
    to{
        transform: translate(50px,0);
    }
}
.main-articles-item:hover{
    animation: 1.8s;
    animation-fill-mode: forwards;
}

/*
文章内容页添加样式
 */
section.articles{
border: 1px solid #c0c0c0;
    min-height: 468px;
    padding: 0 15px;
}
.main-articles-title{
    border-bottom: 1px solid #c0c0c0;
}
.main-articles-title h2{
    text-align: center;
}
.main-articles-title p {
    font-size: 14px;
    text-align: center;
}
.main-articles-title p span{
    padding: 0  10px;
}
.main-articles-content {
    text-indent: 2em;
    font-size: 16px;
    line-height: 1.8em;
}
/*
文章发布
 */
section.edits{
    min-height: 468px;
    padding: 0 15px;
}
.edit{
    min-height: 468px;
    padding: 40px 15px;
    margin-top: 20px;
}
.edit p {
    text-align: center;
}
.edit input[type="submit"] {
    width: 90px;
    height: 40px;
    background: #183d8e;
    color: #fff;
    cursor: pointer;
}
.text-group textarea{
    width: 80%;
    margin-left: 20px;
    height: 400px;
}.text-group label{
    margin-left: 21px;
 }
.form-group label{
    margin-left: 11px;
}
.form-group input{
    width: 79.5%;
    margin-left: 18px;
}
span.modify{
    float: right;
}
span.modify a:hover{
    color: #183d8e;
}
span.modify a{
margin-right: 10px;
}
span.delete{
    float: right;
}
span.delete a:hover{
    color: #183d8e;
}
.page{
    text-align: center;
    margin-top: 15px;
}
.page span{
    display: inline-block;
    background: #fff;
    width: 24px;
    margin: 0 5px;
    line-height: 24px;
    height: 24px;
}
.page span a{
    display: block;
}
.page span.active a{
    background: #183d8e;
    color: #fff;
}
.page span:hover a{
    background: #183d8e;
    color: #fff;
}

然后我们需要做一下数据库的配置在项目的根目录下新建一个config文件，作为数据库的配置文件

/*
数据库信息
 */
const DB = {
    host: "localhost",
    port: 3306,
    user: "root",
    password:"",
    database:"blog"
}
module.exports =DB;

再建立一个database文件
const mysql = require('mysql');
const config = require('./config');

const database = mysql.createConnection({
    host: config.host,
    user: config.user,
    port: config.port,
    password:config.password,
    database: config.database
});
database.connect();
module.exports = database;
然后我们写登录的代码 这里需要引入两个模块
var crypto = require('crypto');
var mysql = require('./../database');  没有的话就要install 安装一下

/*
登陆信息验证
 */
router.post('/login',function (req,res,next) {
      var name = req.body.name;
      var password= req.body.password;
      var hash = crypto.createHash('md5');
      hash.update(password);
      password = hash.digest('hex');
      var query = 'SELECT * FROM author WHERE authorName=' + mysql.escape(name) + 'AND authorPassword=' + mysql.escape(password);
      mysql.query(query,function (err,rows,fields) {
        if (err){
          console.log(err);
          return;
        }
        var user = rows[0];
        if (!user){
          res.render('login',{message:'用户名或者密码错误'});
          return;
        } else if (rows.length> 0) {
            console.log(rows,22,req.session);
            req.session.user = user;
        }

        // req.session.userId = user.authorID;
        res.redirect('/index');
      });
    }
);

这个时候输入启动命令我们启动项目就会看到首页我们的第一个页面就写好了

农村落魄小青年

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
node零基础开发个人博客新手篇 express+node（一）

先发一段node基础代码node中的异步I/O php是同步阻塞方式前端编程算是gui编程一种构成node的基调是事件驱动和单线程代表nginx服务器四个事件 listening 调用server。listen绑定端口抽发connection 客户端套接字连接到服务器端时出发close 服务器关闭时触发 error服务器发生异常时触发入门代码var http =...
复制链接

扫一扫