用express-generator完成项目搭建（+完整blog小案例）

最新推荐文章于 2024-07-23 18:21:09 发布

遥不可及卿何意

最新推荐文章于 2024-07-23 18:21:09 发布

阅读量857

点赞数

分类专栏：数据库文章标签： mongodb node.js javascript jquery ajax

本文链接：https://blog.csdn.net/cc0429xy/article/details/108694160

版权

本文介绍了如何使用express-generator创建项目，并通过javascript、ejs、mongoose等技术实现博客系统的文章添加、列表展示、删除和修改功能。详细讲解了前端HTML、jQuery、Ajax与后端Node.js、Express的交互，以及数据库连接和操作。

摘要由CSDN通过智能技术生成

使用express-generator完成项目搭建

全局安装express-generator

npm install -g express-generator

在这里插入图片描述

设置使用的视图技术，并创建项目

express --view=ejs e:\Project

在这里插入图片描述
因为后面要使用到mongoose，于是先在json文件中，添加"mongoose": "*"，表示安装的是最新版的mongoose。然后在命令行中输入：

npm i

app文件最后不导出，直接改成：

app.listen(9999,()=>console.log('启动了9999端口'));

然后启动run code 启动app.js。
访问静态资源：

http://localhost:9999/stylesheets/style.css

成功：
在这里插入图片描述

访问动态资源：

http://localhost:9999/
http://localhost:9999/users

成功：
在这里插入图片描述

后面是一个案例：

博客案例

这个案例，用不同的请求方法来区分功能的。

在这里插入图片描述

文章添加页面

在这里插入图片描述

前端代码：

html：

	<form id="articleForm">
        <table>
            <tr>
                <td class="leftlable">标题</td>
                <td>
                    <input type="text" id="title" name="title">
                </td>
            </tr>
            <tr>
                <td class="leftlable">作者</td>
                <td><input type="text" id="author" name="author"></td>
            </tr>
            <tr>
                <td class="leftlable">来源</td>
                <td><input type="text" id="source" name="source"></td>
            </tr>
            <tr>
                <td class="leftlable">内容</td>
                <td><textarea name="content" id="content" cols="20" rows="5"></textarea></td>
            </tr>
            <tr>
                <td class="leftlable">&nbsp;</td>
                <td>