项目实训（二）首页搭建

已于 2022-05-29 18:16:13 修改
阅读量504 收藏 2
点赞数
分类专栏： 项目实训 文章标签： vue.js javascript 前端
于 2022-05-29 16:31:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46268374/article/details/125032481
版权

目录

（一）路径配置

（二）indexOne.vue

1、首页效果：

 2、主要代码结构如下：

3、其它效果如下

（一）路径配置

将indexOne.vue的路径配置到二级路由中，再将默认路由改为首页。

（二）indexOne.vue

@import '../../public/static/css/bootstrap.min.css';
@import '../../public/static/css/all.min.css';
@import '../../public/static/css/animate.min.css' ;


@import '../../public/static/css/swiper-bundle.min.css';

@import '../../public/static/css/jquery.nice-number.min.css';
@import '../../public/static/css/nice-select.css';
@import  '../../public/static/css/odometer-theme-default.css';
@import '../../public/static/scss/style.css';

先在style中导入所有css文件

在container中先写主要页面，样式文件代码省略。

1、首页效果：

在下方设置一个div，显示网页的主要功能，一个div循环展示网址使用的书籍信息。

 2、主要代码结构如下：

 <!-- Start Feature -->
  <section class="feature section-top-gap-120">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-4 col-md-6" data-tilt>
          <div class="feature-content feature-content-1">
            <div class="feature-icon">
              <i class="el-icon-search"></i>
            </div>
            <div class="feature-discription">
              <h3>语料检索</h3>
              <p>根据用户输入的中医关键字查找匹配的多版本英译，支持模糊查询、范围查询。通过关键词还可检索上下文。</p>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6" data-tilt>
          <div class="feature-content feature-content-2">
            <div class="feature-icon">
              <i class="el-icon-medal"></i>
            </div>
            <div class="feature-discription">
              <h3>个性推荐</h3>
              <p>根据使用频度以及用户注册时填写的偏好设置对词汇进行排序优化，实现相关语料的快速定位。</p>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6" data-tilt>
最低0.47元/天 解锁文章
缓缓-
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3+Vant开发：首页功能实现
程序员老茶的博客
04-23 1071
Vue3+Vant开发：首页功能实现
Vue后台管理系统练习-1首页侧栏搭建
Yuki_Aruki的博客
05-03 1628
这里利用element-ui的container布局，在官网->组件->base里可以找到相关组件的使用方法，以及布局模板，也可以根据自己的需求进行布局 使用前先在main.js中引入需要使用的组件： import { Container, Main, Header, Aside } from 'element-ui'; Vue.use(Container, Main, Header, Aside) 引用后可以直接在Home.vue搭建基本布局，此处使用官网的布局： <el-contai
vue3配置导航栏和页脚（附代码）
如果相遇，那么你好哦~
11-14 2093
本文主要是针对刚上手 Vue3 的初学者所写。涉及内容比较简单，没有太过于复杂的逻辑。因此有想学神入知识的可以看一下别的文章。 本次实验的技术是 Vue3 + TypeScript + Element Plus 。因为这三个是在 Vue 开发中经常一起出现的。如果没有学过的话也不要紧，逻辑大体是一样的，不妨碍阅读。 这里附上 Gitee 开源地址，有想要实践一下又懒得写代码的小伙伴可以直接下载运行。同时在本系列 Vue3 学习中，后续代码也都会更新在这个
Vue3后台通用管理系统（一）：header、aside组件的基本搭建、首页home组件的实现
DogEgg_001的博客
11-11 1188
使用vue3+ts+pinia+element-plus搭建一个通用的后台管理系统（没准后面会改成特定的功能）header、aside是非路由组件，中间的部分用于放置不同的路由组件，例如home、user等。
vue3构建后台管理系统（4）——基于Vue Router实现首页快捷导航
关注前端，关注原创
04-28 1032
上篇文章介绍了基于router插件，view ui的路由实现。本篇文章在上文的基础上，借助router.js中配置的参数，实现首页快捷导航。通过对router的改造，进一步理解路由的用法。如果理解了上篇文章中基于router实现导航栏，那么本文只能算是个小demo，旨在打开思路——只要设计合理，router.js中的对象属性是可以随心所欲操作的。其实不论是导航栏的渲染，还是首页快捷导航的渲染，都蕴藏了一个前端很重要的思路——渲染逻辑和业务逻辑解耦。渲染逻辑，就是我拿到数据后，如何把数据渲染成页面。
[微前端实战]---034vue3 - 首页,选车页面
小李科技
08-15 531
[微前端实战]---034
vue第三天笔记03——路由小练习(首页)
lqh的博客
08-19 229
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
Vue电商项目练习-3 主页设计
程西西
08-01 906
主页设计实现效果设计思路具体实现搭建基本结构header区域设计aside 侧边栏设计通过axios添加token验证通过接口动态获取侧边栏菜单数据获取数据v-for 渲染数据和图标设置每次只能打开一个菜单栏侧边栏折叠与展开侧边栏路由链接改造首页路由重定向 实现效果 设计思路 主要分为三个部分 头部区域 侧边栏区域 右侧主体区域 使用 Container 布局容器来搭建页面的基本结构 container <el-container>：外层容器。当子元素中包含 <el-header
阶段二-vue路由的综合案例
weixin_45732755的博客
11-11 254
vue路由的综合案例
Hadoop集群构建实训报告.doc
04-06
Hadoop集群构建实训报告
毕设&课设&项目&实训-基于uni-app搭建个人记账微信小程序.zip
最新发布
02-05
可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，...
配置一个vue3.0项目的完整步骤
11-28
说起来有点丢人，我已经使用vue好久了，但是怎么从0开始配置一个vue项目，每次还是要百度。这次决定写个博客，加强下记忆，如果再记不住就直播自己的女朋友洗澡。 以下以新建一个图书管理项目为例。我使用vue3新建项目，对于创建一个项目来说，vue3真的比vue2简单很多。 1.初始化项目 1.1全局安装vue-cli 创建vue项目，首先要确保全局安装了vue命令行工具。 我这边使用yarn而不用npm，因为yarn要比npm好用的多，强烈推荐使用。如果大家对yarn不熟悉，我这边免费赠送我的yarn教程。 点击查看 。 yarn add global @vue/cli 1.2 新建项目 使用
毕设&课设&项目&实训-基于 ADF + Quartz 搭建的可视化作业调度应用.zip
02-03
可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，...
大数据项目开发实训.pdf
12-24
⼤数据项⽬开发实训 实训要求 利⽤python编写爬⾍程序，从招聘⽹站上爬取数据，将数据存⼊到MongoDB数据库中，将存⼊的数据作⼀定的数据清洗后做数据分析， 利⽤flume采集⽇志进HDFS中，利⽤hive进⾏分析，将hive...
毕设&课设&项目&实训-基于pp-shitu搭建的商品识别可视化demo。.zip
02-03
可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，...
基于vue3的门户首页
zq1234sfg的博客
09-04 828
可开发app h5 pc web端 微信小程序 微信公众号等项目 如有需要私信联系。这样页面就写好了 这个项目我有空的话后续会更新成前端后端可发布的完整的项目。如果在写毕业设计需要参考的话这是初学者一个很好的项目 其他问题也欢迎咨询。所以在router里面定义好layout。分为上面导航条 下面主体 两部分。主体home.vue。
vue3+elementplus写一个简单首页
qq_40809644的博客
12-18 1022
在使用Vue 3结合Element Plus框架开发首页时，您需要先搭建Vue 3项目，然后引入Element Plus库。以下是一个基本的步骤指导和代码示例，帮助您完成首页的开发。这个示例包含一个简单的布局，包括顶部导航栏、侧边栏和主内容区域。您可以根据需要修改样式和内容。现在，当您访问项目时，首页将显示在浏览器中。您可以继续根据需求扩展和自定义首页。
vue3重构个人网站2——首页
yjltop的博客
09-13 1728
1 首页思路 2 轮播图 3 文章列表卡片 1 首页思路   直接上图，主页跟旧版的类似。开头的固定图片改成轮播图，手动搞了个循环轮播，效果还不错。主体内容仍然是左边导航，右侧推荐文章列表。底部是仓库，邮箱地址等。 2 轮播图   轮播图的布局不是很复杂，左右切换键跟中间文字都是绝对定位，所以实际上只有图片。重点是循环轮播的特征，即在最后一张继续点击切换下一张时会切换到第一张，并且保证切换动画方向不变，在很多轮播图插件中，要么在第一张和最后一张无法继续切换；要么是倒退的动画回到第一张或最后一张，我个人
Vue3+Element-Plus 实现首页Main区域内容展示功能 二八
build2024
12-13 6475
1.实现的原理 1.1 用户登录成功后，默认展示出来的是home 组件，如需要在用户进入首页后，需要展示出一个欢迎（Welcome）页面，显示在（Main）主体区域。需要展示的欢迎组件是通过设置子路由规则，使用重定向（redirect） 来实现 2. 如何实现 2.1 首先，应定义一个欢迎（Welcome）组件 2.2 其次，欢迎（Welcome）组件定义好后，需要在（Main）内容主体区域定义一个路由占位符，用来展示（Welcome） 组件 2.3 最后，在路由规则设置中，..
express框架项目搭建实训报告
05-30
实训报告：使用 Express 框架搭建 Web 项目 一、实验目的 通过本次实训，学生应该掌握以下技能： 1. 使用 Express 框架搭建 Web 项目； 2. 使用路由来处理不同的 HTTP 请求； 3. 使用模板引擎来渲染页面； 4. 使用中间件来处理请求和响应； 5. 实现基本的用户认证和授权。 二、实验环境 1. 操作系统：Windows 或 macOS； 2. 开发工具：Visual Studio Code； 3. 语言：Node.js 和 JavaScript。 三、实验步骤 1. 创建新项目 在 Visual Studio Code 中创建一个新的文件夹并打开终端。在终端中使用 `npm init` 命令初始化项目，并根据提示输入项目信息。接着，使用 `npm install express --save` 命令安装 Express 框架。 2. 创建主文件 在项目根目录下创建一个名为 `app.js` 的文件，并添加以下代码： ``` const express = require('express'); const app = express(); app.get('/', (req, res) => { res.send('Hello World!'); }); app.listen(3000, () => { console.log('App listening on port 3000!'); }); ``` 在这个例子中，我们创建了一个简单的 Express 应用程序，并在根路径上添加了一个路由，响应一个字符串。然后，我们使用 `app.listen()` 方法来监听端口 3000。 3. 添加路由 我们可以使用路由来处理不同的 HTTP 请求。在 `app.js` 文件中，添加以下代码： ``` // 处理 GET 请求 app.get('/users', (req, res) => { res.send('Get a list of users'); }); // 处理 POST 请求 app.post('/users', (req, res) => { res.send('Create a new user'); }); // 处理 PUT 请求 app.put('/users/:id', (req, res) => { res.send(`Update a user with ID ${req.params.id}`); }); // 处理 DELETE 请求 app.delete('/users/:id', (req, res) => { res.send(`Delete a user with ID ${req.params.id}`); }); ``` 在这个例子中，我们定义了四个路由来处理 GET、POST、PUT 和 DELETE 请求。其中，PUT 和 DELETE 请求通过 URL 中的参数来指定要操作的资源的 ID。 4. 使用模板引擎 Express 框架支持多种模板引擎，如 EJS、Pug、Handlebars 等。在本次实训中，我们使用 EJS 模板引擎来渲染页面。首先，使用 `npm install ejs --save` 命令安装 EJS 模板引擎。然后，在 `app.js` 文件中添加以下代码： ``` // 设置模板引擎 app.set('view engine', 'ejs'); // 渲染页面 app.get('/users', (req, res) => { const users = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' } ]; res.render('users', { users }); }); ``` 在这个例子中，我们使用 `app.set()` 方法来设置模板引擎为 EJS。然后，在 `/users` 路由中，我们定义了一个数组 `users`，并将其传递给 EJS 模板引擎进行渲染。最后，我们使用 `res.render()` 方法来渲染页面，并将渲染后的 HTML 响应给客户端。 5. 使用中间件 Express 框架允许我们使用中间件来处理请求和响应。在 `app.js` 文件中，添加以下代码： ``` // 记录请求日志 app.use((req, res, next) => { console.log(`${new Date().toISOString()}: ${req.method} ${req.url}`); next(); }); // 处理静态文件 app.use(express.static('public')); ``` 在这个例子中，我们定义了两个中间件。第一个中间件用来记录请求日志，它会在每个请求到达时输出请求的时间、请求方法和 URL。第二个中间件用来处理静态文件，它会将请求的 URL 映射到项目根目录下的 `public` 文件夹中。 6. 实现用户认证和授权 在本次实训中，我们使用 Passport.js 库来实现用户认证和授权。首先，使用 `npm install passport passport-local passport-local-mongoose express-session --save` 命令安装所需的库和插件。然后，在 `app.js` 文件中添加以下代码： ``` const passport = require('passport'); const LocalStrategy = require('passport-local').Strategy; const session = require('express-session'); const mongoose = require('mongoose'); const User = require('./models/user'); // 连接 MongoDB 数据库 mongoose.connect('mongodb://localhost/myapp', { useNewUrlParser: true, useUnifiedTopology: true }).then(() => { console.log('Connected to MongoDB'); }).catch((err) => { console.error('Failed to connect to MongoDB', err); }); // 配置 Passport.js const strategy = new LocalStrategy({ usernameField: 'email', passwordField: 'password' }, async (email, password, done) => { try { const user = await User.findOne({ email }); if (!user) { return done(null, false, { message: 'Incorrect email or password.' }); } const isMatch = await user.comparePassword(password); if (!isMatch) { return done(null, false, { message: 'Incorrect email or password.' }); } return done(null, user); } catch (err) { return done(err); } }); passport.use(strategy); passport.serializeUser((user, done) => { done(null, user.id); }); passport.deserializeUser(async (id, done) => { try { const user = await User.findById(id); done(null, user); } catch (err) { done(err); } }); // 配置 Express.js app.use(express.urlencoded({ extended: true })); app.use(session({ secret: 'myapp', resave: false, saveUninitialized: false })); app.use(passport.initialize()); app.use(passport.session()); // 处理登录请求 app.get('/login', (req, res) => { res.render('login'); }); app.post('/login', passport.authenticate('local', { successRedirect: '/', failureRedirect: '/login', failureFlash: true })); // 处理注销请求 app.get('/logout', (req, res) => { req.logout(); res.redirect('/'); }); // 处理用户信息请求 app.get('/profile', (req, res) => { if (!req.user) { return res.redirect('/login'); } res.render('profile', { user: req.user }); }); ``` 在这个例子中，我们使用 `mongoose` 库连接到 MongoDB 数据库，并定义了一个名为 `User` 的模型来表示用户。然后，我们使用 Passport.js 配置了本地认证策略，并将其添加到 Express.js 应用程序中。接着，我们使用中间件来处理登录请求、注销请求和用户信息请求。在登录请求中，我们使用 `passport.authenticate()` 方法来验证用户的邮箱和密码，并在验证成功时重定向到首页。在注销请求中，我们使用 `req.logout()` 方法来注销用户。在用户信息请求中，我们检查用户是否已登录，如果未登录，则重定向到登录页面，否则渲染用户信息页面。 四、实验总结 通过本次实训，我们学习了使用 Express 框架搭建 Web 项目的基本步骤，并实现了路由、模板引擎、中间件和用户认证和授权等功能。这些技能在 Web 开发中都非常重要，可以帮助我们更加高效地开发 Web 应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值