如何使用 Express.js 和 Vue.js 构建单页面应用程序-JavaScript中文网-JavaScript教程资源分享门户

随着 web 应用程序的日益流行，越来越多的企业和个人开始使用单页面应用程序（SPA）来构建他们的网站。SPA 可以提供流畅的用户体验和快速响应时间，让用户可以在一个页面中获取所有需要的信息，而不需要频繁地刷新页面。在本文中，我们将介绍如何使用 Express.js 和 Vue.js 构建单页面应用程序。

Express.js

Express.js 是一个基于 Node.js 的 web 应用程序框架，它可以帮助我们快速地创建 web 应用程序。它是开源的，拥有庞大的社区支持和活跃的开发者社区。如果你熟悉 Node.js，那么使用 Express.js 构建 web 应用程序将变得轻而易举。

首先，我们需要安装 Express.js。打开终端并输入以下命令：

npm install express --save

这将安装最新版本的 Express.js。

接下来，我们可以创建一个新的 Express.js 应用程序，并监听端口：

const express = require('express');
const app = express();

app.listen(3000, () => {
  console.log('App listening on port 3000!');
});

现在，我们已经成功创建了一个简单的 Express.js 应用程序，并将其监听在端口 3000 上。

Vue.js

Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面。它是轻量级的，易于学习和使用。Vue.js 拥有类似 AngularJS 的双向数据绑定能力和 ReactJS 的虚拟 DOM 功能。Vue.js 可以与任何后端服务通信，并且可以轻松地与其他 JavaScript 库集成。

首先，我们需要安装 Vue.js。打开终端并输入以下命令：

npm install vue --save

这将安装最新版本的 Vue.js。

接下来，我们可以创建一个简单的 Vue.js 应用程序：

const Vue = require('vue');
const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

这将在 id 为 app 的元素中显示“Hello Vue!”。

使用 Express.js 和 Vue.js 构建 SPA

现在，我们已经成功创建了一个简单的 Express.js 应用程序和一个简单的 Vue.js 应用程序。接下来，我们将介绍如何结合使用 Express.js 和 Vue.js 来构建单页面应用程序。

首先，我们需要安装一些额外的包，用于处理请求和路由：

npm install body-parser --save
npm install cookie-parser --save
npm install express-session --save
npm install multer --save
npm install vue-router --save

接下来，我们可以使用 Express.js 的路由功能来配置我们的 SPA。打开 app.js 并添加以下代码：

// javascriptcn.com 代码示例
const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');
const bodyParser = require('body-parser');
const session = require('express-session');
const multer = require('multer');

const app = express();

// set up view engine
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// set up middlewares
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(multer());

// set up session
app.use(session({
  secret: 'secret',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: true }
}));

// set up static files
app.use(express.static(path.join(__dirname, 'public')));

// set up routes
const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');

app.use('/', indexRouter);
app.use('/users', usersRouter);

// start the server
app.listen(3000, () => {
  console.log('App listening on port 3000!');
});

在这个例子中，我们设置了我们的视图引擎，使用了一些 Express.js 中间件，设置了一个会话，并设置了公共静态文件夹。然后，我们定义了两个路由：/ 和 /users。

在我们的 / 路由中，我们可以直接渲染我们的 Vue.js 应用程序。编辑 index.js 文件：

// javascriptcn.com 代码示例
const express = require('express');
const router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

在 /users 路由中，我们可以处理一些 API 请求并返回 JSON 数据。编辑 users.js 文件：

// javascriptcn.com 代码示例
const express = require('express');
const router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

router.get('/data', function(req, res, next) {
  res.json({ name: 'John', age: 30 });
});

module.exports = router;

现在，我们需要在我们的 Vue.js 应用程序中定义一个路由器。

打开 Vue.js 应用程序并添加以下代码：

// javascriptcn.com 代码示例
const Vue = require('vue');
const VueRouter = require('vue-router');
const Home = { template: '<div>Home page</div>' };
const About = { template: '<div>About page</div>' };
const User = {
  template: '<div>User page {{ $route.params.id }}</div>'
};

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/user/:id', component: User }
  ]
});

const app = new Vue({
  router
}).$mount('#app');

在这个例子中，我们定义了三个路由：/，/about 和 /user/:id。模板和组件通过 Vue.js 的 single-file components 功能进行定义。我们还定义了一个 VueRouter 实例，并将其传递到我们的根实例中。

现在，我们已经成功地设置了我们的 Express.js 和 Vue.js 应用程序，并定义了我们的路由。我们可以通过运行以下命令在本地启动我们的应用程序：

npm start

现在我们可以在浏览器中访问我们的 SPA。

总结

在本文中，我们介绍了如何使用 Express.js 和 Vue.js 构建单页面应用程序。我们讨论了如何设置 Express.js 应用程序，如何设置 Vue.js 应用程序，以及如何使用 Vue.js 路由器来管理我们的 SPA。我们的示例程序提供了一些基本的功能，但是你可以使用它来构建更复杂的应用程序。希望这将成为你开始建立 SPA 的指南！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652f6b937d4982a6eb08c11b