从零开始，使用Vue3.0和Express搭建8080苹果影院

2023-11-10 22:09:01

如何使用Vue3.0+Express从无到有构建一个8080苹果影院

在本文中，我们将详细介绍如何使用Vue3.0和Express从头开始构建一个8080苹果影院网站。我们将重点介绍前端开发、后端开发、性能优化和项目部署等各个方面。

前端开发

首先，我们需要创建一个Vue3.0项目。可以使用Vue CLI工具来创建一个新的项目。

vue create 8080-apple-cinema

接下来，我们需要安装一些必要的依赖项。

npm install vue-router vuex axios

现在，我们可以开始编写前端代码了。

在src/App.vue文件中，我们可以定义我们的应用程序的根组件。

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import { createRouter, createWebHistory } from 'vue-router'
import Home from './Home.vue'
import About from './About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default {
  name: 'App',
  router
}
</script>

在src/Home.vue文件中，我们可以定义我们的主页组件。

<template>
  <div>
    <h1>8080苹果影院</h1>
    <p>欢迎来到8080苹果影院，这里有您最喜欢的电影和电视节目。</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

在src/About.vue文件中，我们可以定义我们的关于页面组件。

<template>
  <div>
    <h1>关于8080苹果影院</h1>
    <p>8080苹果影院是一个提供电影和电视节目流媒体服务的网站。我们致力于为用户提供最好的流媒体体验。</p>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

现在，我们已经完成了前端开发。

后端开发

接下来，我们需要创建一个Express项目。可以使用Express Generator工具来创建一个新的项目。

express --view=ejs

接下来，我们需要安装一些必要的依赖项。

npm install mongoose body-parser

现在，我们可以开始编写后端代码了。

在app.js文件中，我们可以定义我们的Express应用程序。

const express = require('express')
const mongoose = require('mongoose')
const bodyParser = require('body-parser')

const app = express()

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))

mongoose.connect('mongodb://localhost/8080-apple-cinema', {
  useNewUrlParser: true,
  useUnifiedTopology: true
})

const movieSchema = new mongoose.Schema({
  title: String,
  year: Number,
  director: String,
  stars: [String],
  genres: [String],
  plot: String
})

const Movie = mongoose.model('Movie', movieSchema)

app.get('/movies', async (req, res) => {
  const movies = await Movie.find()
  res.json(movies)
})

app.get('/movies/:id', async (req, res) => {
  const movie = await Movie.findById(req.params.id)
  res.json(movie)
})

app.post('/movies', async (req, res) => {
  const movie = new Movie(req.body)
  await movie.save()
  res.json(movie)
})

app.put('/movies/:id', async (req, res) => {
  const movie = await Movie.findByIdAndUpdate(req.params.id, req.body, { new: true })
  res.json(movie)
})

app.delete('/movies/:id', async (req, res) => {
  await Movie.findByIdAndDelete(req.params.id)
  res.json({ message: 'Movie deleted successfully' })
})

app.listen(3000, () => {
  console.log('Server is listening on port 3000')
})