说明

使用nodejs搭建自己的博客 网站需要会 node 基础, 基本的html, css 以及JavaScript 基础,这里我使用的是 layui 模板(来自开源模板)。

如果文件运行有问题可以私聊解答哦!!

源文件压缩包地址(包含 sql 文件):

源文件下载地址

博客运行截图如下:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

运行

  1. 下载源代码解压
  2. 在根目录下面执行 npm install 或者 cnpm install 进行项目初始化
  3. 在终端进入到 bin 目录下 执行 node www.js
  4. 执行成功后 打开网页 localhost:80 或者 127.0.0.1:80 即可

注意: 在 npm 初始化的时候可能会要求安装其他东西, 缺啥安装啥就可。

后端 node 模块

后端框架采用的是 express 框架进行接口构建,具体解释如下:

emm,忽略命名不堪入目

在router文件下面的代码块:

  getList,
    newBlog,
    updateBlog,
    delBlog,
    comment1, // 博客一级评论
    comment2, //回复评论
    ZDF, // 对博客进行置顶处理
    classFic, // 新建博客分类
    delClassFic, // 删除博客分类,
    LiveMessage, // 新建留言,
    LiveMessageBack, // 新建留言回复
    diary, // 新建日记表
    URLList, // 新建友情链接
    PeopleList, // 新建最近访问人员列表
    getLiveList, // 获取留言内容,
    getLive2List, // 获取二级留言内容
    getDiaryList, // 获取日记内容,
    getlinkList, // 获取友情链接信息
    browseAdd, // 实现单篇博客浏览量加一
    classFicList, // 获取博客类别
    HotARC, // 根据浏览量获取前8 的文章
    getBlog, // 根据博客ID获取博客详情,
    topBlog, // 获取置顶博客ID,
    getcommentList, // 获取评论信息
    getcommentBackList, // 获取评论回复信息
    getBlogClass, // 根据类别查找博客
    getBlogSearch, // 模糊查询
    getVistor, // 获取最近访客数据
    Blogzan, // 用户IP
    getDianzan, // 查询点赞IP
    updateZan, // 点赞加一

以上是来自 ../controller/blog 文件下面的哥哥函数导出,具体函数功能请参考 ../controller/blog/文件下面的 blog.js

注: user 是用户文件,包括的函数有注册登录

数据库参数配置

在db文件下面的 mysql 进行数据库连接(具体数据库表格文件在源文件压缩包中)

MYSQL_CONF = {
    host: '',// 服务器ip
    user: '',// 用户名
    password: '', // 密码
    port: '', // 端口
    database: '' // 数据库名称
}
评论邮箱提示

在用户留言或者评论博文的时候会通过邮箱提示 某人回复了,该功能默认不开放,如果需要使用自行申请QQ邮箱或者163邮箱,配置代码块如下:


//创建一个smtp服务器
const config = {
    host: 'smtp.qq.com',
    port: 465,
    auth: {
        user: '', //注册的163邮箱账号
        pass: '' //邮箱的授权码,不是注册时的密码,等你开启的stmp服务自然就会知道了
    }
};
付费文件下载配置(支付宝)

在博客的详情页拥有附件付费下载功能,该功能默认开放,如果需要使用请前往支付宝开发中心申请,不使用请自行关闭,配置文件夹路径根目录/alipay_config.js 参数配置如下:

// 这里配置基本信息
const AlipayBaseConfig = {
    appId: '', // 应用 ID
    privateKey: fs.readFileSync(path.join(__dirname, './sandbox-pem/private_pem2048.txt'), 'ascii'), // 应用私钥
    alipayPublicKey: '', //支付宝公钥
    gateway: 'https://openapi.alipaydev.com/gateway.do', // 支付宝的应用网关
    charset: 'utf-8',
    version: '1.0',
    signType: 'RSA2'
};

注: 秘钥签名文件夹放在 sandbox-pom 文件夹中。

评论语句检测

评论语句检测是为了防止评论区的不文明发言,该方法使用的是百度ai接口语义检测,默认不开启,如果需要使用请前往百度ai配置即可,修
router/blog.js 下面的代码 在接口的 access_token 补齐即可:

router.post('/baiduAPI_qinggan', (req, res, next) => {
    var text = req.body.text || '暂无'
    request({
        url: "https://aip.baidubce.com/rpc/2.0/nlp/v1/sentiment_classify?charset=UTF-8&access_token=", //请求路径
        method: "POST", //请求方式,默认为get
        headers: { //设置请求头
            "content-type": "application/json",
        },
        body: JSON.stringify({
                "text": text
            }) //post参数字符串
    }, function(error, response, body) {
        res.json(
            new SuccessModel(JSON.parse(body))
        )
    });

});

关于跨域问题的解决

在 node 中关于跨域问题的解决

设置所有域名允许跨域:

app.all("*",function(req,res,next){
    //设置允许跨域的域名,*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin","*");
    //允许的header类型
    res.header("Access-Control-Allow-Headers","content-type");
    //跨域允许的请求方式 
    res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
    if (req.method.toLowerCase() == 'options')
        res.send(200);  //让options尝试请求快速结束
    else
        next();
}

指定域名跨域:

app.all("*",function(req,res,next){
    //设置允许跨域的域名,*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin","http://www.xianglansweb.com");
    //允许的header类型
    res.header("Access-Control-Allow-Headers","content-type");
    //跨域允许的请求方式 
    res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
    if (req.method.toLowerCase() == 'options')
        res.send(200);  //让options尝试请求快速结束
    else
        next();
}

但是在实际的项目中前后端分离跨域问题却很难解决,因此只要在一个域中就自然而然的不会出现跨域。

具体步骤:

在node 的 app.js中进行资源开放 public 文件夹:

app.use(express.static(path.join(__dirname, 'public')));

然后直接运行 node 后根据路径访问 .html 文件即可。

如果想要路由好看直接在 app.js 中进行路由配置即可, 如下:

app.get('/', function(req, res) {
    res.sendFile(__dirname + "/public" + "/xl-BLOG/index.html")
});
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐