简介
npm 是一个很方便的包管理工具,它可以帮助我们快速地安装、更新和管理依赖。而 nodejs_sample_aravinth 是一个基于 Node.js 的项目示例,它可以让你了解如何使用一些常用的技术来构建一个完整的应用程序。
该项目包含了以下组件:
- Express:Web 应用程序的框架。
- Mongoose:用于连接 MongoDB 数据库的对象模型。
- Passport:处理用户认证和授权的中间件。
- EJS:用于渲染动态页面的模板引擎。
在本文中,我们将通过具体的步骤来演示如何使用 nodejs_sample_aravinth 建立一个简单的网站。
步骤
安装 Node.js 和 MongoDB
首先,我们需要安装 Node.js 和 MongoDB。你可以从官方网站下载它们的安装包,并按照它们的向导进行安装。
创建项目
接下来,我们需要创建一个项目并安装 nodejs_sample_aravinth 包。在终端中依次执行以下命令:
$ mkdir myproject && cd myproject $ npm init $ npm install nodejs_sample_aravinth --save
使用 npm init
命令可以生成一个 package.json 文件,在其中记录项目的元数据,并且可以通过 --yes
选项跳过交互式设置。--save
选项可以将包名和版本保存到 package.json 文件的 dependencies 列表中。
创建服务器
第一步,我们需要创建一个服务器。在项目根目录下创建一个名为 app.js
的文件,输入以下代码:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - --------------- --------- --- ----- ---- - ---------------- -- ----- ---------------- -- -- - ------------------- ------- -- ---- ---------- ---
在这个文件中,我们使用 Express 创建一个 web 应用程序,并设置路由 /
的响应。这个路由在请求时会返回一个字符串 "Hello World!"
。最后,我们将服务器监听在端口 3000 上。
连接数据库
第二步,我们需要使用 Mongoose 连接 MongoDB。在 app.js
文件中添加以下代码:
-- -------------------- ---- ------- ----- -------- - -------------------- ------------------------------------------------- - ---------------- ----- ------------------- ---- ---------- -- - ---------------------- -- ---------- ------------ -- - --------------------------- ----------------- ---
这将会连接到本地 MongoDB 数据库的 myproject 数据库,并且 mongoose.connect() 的返回值是一个 Promise 对象。在这个 Promise 完成后,我们打印一条连接成功的日志;如果连接失败,我们就打印出错误日志,并终止应用程序。
添加用户认证
第三步,我们需要添加用户认证功能。我们使用 Passport 来处理这个功能,具体步骤如下:
在
app.js
文件中添加以下代码:const passport = require('passport'); const LocalStrategy = require('passport-local').Strategy; app.use(express.urlencoded({ extended: true })); app.use(passport.initialize()); app.use(passport.session());
这将会引入 Passport 和 LocalStrategy 中间件,并且设置使用表单方式进行请求。
创建一个名为
models/user.js
的文件,在其中定义用户模型:-- -------------------- ---- ------- ----- -------- - -------------------- ----- ------ - ---------------- ----- ---------- - --- -------- --------- ------- --------- ------ --- -------------- - ---------------------- ------------
这创建了一个名为 User 的模型,其中有两个属性:username 和 password。
创建一个名为
config/passport.js
的文件,并添加以下代码:-- -------------------- ---- ------- ----- -------- - -------------------- ----- ------------- - ----------------------------------- ----- ---- - -------------------------- ---------------- ------------------------ --------- ----- -- - -------------- --------- -------- ------------ -- - -- ------- - ------ ---------- ------ - -------- ---------- ---------- --- - -- -------------- --- --------- - ------ ---------- ------ - -------- ---------- ---------- --- - ------ ---------- ------ ------------ -- - ------ ---------- --- ---- ----------------------------- ----- -- - ---------- --------- --- ----------------------------- ----- -- - --------------------------- -- - ---------- ------ ------------ -- - ---------- --- ---
这将会创建一个本地认证策略,并且在用户模型中查找用户。如果用户被找到了,则检查密码是否正确,如果正确,则得到用户。serializeUser 方法将用户 ID 传递给 Passport,而 deserializeUser 方法通过 ID 找到用户并将其传递回调函数。
在
app.js
文件中添加以下代码:app.post('/login', passport.authenticate('local', { successRedirect: '/', failureRedirect: '/login' }));
这会将 POST 请求 '/login' 路由到本地认证策略中。如果认证成功,成功回调函数将导航到主页(通过
/
),如果失败则重定向到登录页(通过/login
)。
添加模板引擎
最后一步,我们需要添加一个模板引擎来渲染动态页面。我们选择 EJS 作为我们的模板引擎,具体步骤如下:
在
app.js
文件中添加以下代码:const ejs = require('ejs'); app.set('view engine', 'ejs'); app.set('views', __dirname + '/views');
这将会引入 EJS 模板引擎,并将其设置为默认引擎。它还将视图文件夹设置为项目中的
views
文件夹。在
views
文件夹中创建一个名为login.ejs
的文件,添加以下代码:<form method="POST" action="/login"> <label>Username: <input type="text" name="username"/></label> <br/> <label>Password: <input type="password" name="password"/></label> <br/> <input type="submit" value="Login"/> </form>
这将创建一个简单的登录表单。
创建一个名为
views/index.ejs
的文件,添加以下代码:<% if (user) { %> <p>Welcome, <%= user.username %>!</p> <p><a href="/logout">Logout</a></p> <% } else { %> <p>You are not logged in.</p> <p><a href="/login">Login</a></p> <% } %>
这将创建一个动态页面,如果用户已登录,则显示欢迎消息和退出链接,否则显示登录链接。
运行项目
最后一步,运行以下命令启动应用程序:
$ node app
浏览器中输入网址 http://localhost:3000
,就能看到 "Hello World!"。重定向到 http://localhost:3000/login
,就能看到我们刚才创建的登录表单。
结尾
通过这篇文章,你已经学习到了如何使用 nodejs_sample_aravinth 包建立一个简单的网站,并添加了用户认证和模板引擎等功能。我希望这篇文章能够帮助你深入了解前端开发,以及如何使用 npm 包管理工具来处理前端项目中的依赖管理。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60056ffd81e8991b448e7c73