实训项目代码开发环境搭建

最新推荐文章于 2024-07-04 09:24:51 发布
最新推荐文章于 2024-07-04 09:24:51 发布
阅读量391 收藏 3
点赞数 12
文章标签： java spring maven html5 node.js vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77410858/article/details/139904691
版权

任务描述
本次实训主要内容是完成小额信贷系统数据管理平台的开发工作，
本任务中，参与学员需要在个人电脑搭建代码开发环境，相关描述如下：
1、在个人电脑搭建【小额信贷系统数据管理平台】Java开发环境并保证开发环境能正常启动；
2、在个人电脑搭建【小额信贷系统数据管理平台】前端环境并保证前端环境能正常启动；
3、项目启动成功后，需要将项目登录成功后主页面的截屏作为任务结果物提交。
任务指导
相关任务提示信息如下：
1、Java开发项目JDK版本使用17，学员保证个人电脑JDK版本不低于17；
2、本次实训关系数据库使用MySQL 8.0，缓存数据库使用Redis,学员需要保证个人电脑安装有MySQL8.0 和Redis 登陆密码为空;
3、本次实训需要学员在个人电脑能运行成功前端代码一方便接口联调，前端代码基于Vue3+Element-plus实现，所以学员要保证个人电脑安装有Node.js 版本不能低于18；
4、本次实训Java端开发环境建议使用IDEA，同时需要安装VSCode来运行前端代码；

后端：

将后端导入idea打开
注意初始导入需要将整个项目导入maven
首先要搭建好mysql8和redis
注意上面的redis服务必须得先打开
这两个网上都有教程没什么好说的

接下来这个更加重要

将pom.xml重新加载项目，右键即可，否则会缺少部分依赖包
image.png

然后找到ruoyi-admin模块中的application-druid.yml文件修改成我们之前创建的数据库密码用户
最后找到RuoYiApplication.java运行main函数启动后端项目
image.png

前端：

首先导入项目在vscode
image.png
安装打开终端安装依赖
命令如下：

npm install --registry=https://registry.npm.taobao.org

image.png
接着安装dev
命令：

npm install vite

最后启动npm后端项目
直接在左下角那里npm脚本那里运行dev
image.png

最终效果：
默认账号密码：admin/123456
image.png

image.png

Ni0duann
关注
  • 12
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小蚁项目实训学习笔记（1）-搭建开发环境
weixin_45147233的博客
03-28 839
前言 很感谢这次小蚁工场在疫情期间为我们提供项目实训。这次主要做的是《小蚁在家智能控制》项目，其主要是语音控制的实现。下面我就将我学习的内容做成笔记，希望对大家有所帮助，共同学习。 文章目录前言day01-搭建开发环境1.首先我们需要安装VMware软件和Ubuntu操作系统：2.安装VMware后，我们打开虚拟机：3.进入ubuntu虚拟机:4.设置共享文件：5.解决Ubuntu联网成功但是无法...
项目实训代码.zip
05-28
在本实训项目中，你将有机会深入理解和应用Vue.js的核心概念，包括数据绑定、指令、组件化、计算属性、事件处理等。 1. **数据绑定**：Vue.js中的双向数据绑定是其一大特点，它允许视图和模型之间的数据自动同步。...
山东大学项目实训十——Android开发环境搭建
fangjiayou的博客
05-21 1075
Android开发环境搭建 本章介绍了如何在个人电脑上搭建Android开发环境，主要包括：Android开发的发展历史是怎样的、 Android Studio的开发环境是如何搭建的、如何创建并编译App工程、如何运行和调试App。 1.1 Android开发简介 本节介绍Android开发的历史沿革，包括Android的发展历程和Android Studio的发展历程两个方面。 1.1.1 Android的发展历程 安卓（Android）是一种基于Linux内核（不包含GNU组件）的自由及开放源代码的操.
php动态网站开发实训项目,PHP动态网站开发项目实战
weixin_29733795的博客
03-11 1118
图书简介配套资源：项目素材、教学设计、教学视频、教学PPT、项目任务书等本书特色：1.以一套完整的动态网站项目为载体，按照行业工作过程来讲授网站实际开发过程。2.以功能模块形式将该项目分解为个18任务，以任务驱动式编写。3.配套资源丰富：教学课件、教学设计、项目任务书、项目素材、拓展电子资源、项目演示视频等。本书配套资源，样书均可在本页下载申请，也可联系微信15910938545直接索取本书为PH...
android实训小组项目,Android实验实训项目一用户信息管理
weixin_42520132的博客
05-29 728
《Android实验实训项目一用户信息管理》由会员分享，可在线阅读，更多相关《Android实验实训项目一用户信息管理(9页珍藏版)》请在人人文库网上搜索。1、Android 实验实训项目一用户信息管理【实训要求】JDK 版本：JDK8开发工具：Eclipse3.8教学环境：固定机房或教室【实训目标】“用户信息管理”包含首页、用户注册、用户登录、个人资料、设置、修改、设置密保、找回、修改个人信息 ...
Java开发环境搭建实验报告
weixin_57432894的博客
06-15 7376
Java开发环境搭建实验报告：实验目的、实验设备、实验原理简述、实验数据记录及数据处理、实验结果分析
android驱动开发环境搭建,Android项目驱动式开发教程
weixin_39588209的博客
05-28 249
Android项目驱动式开发教程编辑锁定讨论上传视频《Android项目驱动式开发教程》是2014年机械工业出版社出版的图书，作者是刘正。书名Android项目驱动式开发教程作者刘正ISBN978-7-111-59758-2页数245定价39.8出版社出版时间2018年6月装帧平装开本16开Android项目驱动式开发教程内容简介编辑本书基于Andr...
大数据平台搭建实训报告(思路而已)
xiaobai729的博客
11-19 4664
实训报告而已，仅仅是个思路，供自己参考用，没有什么重要知识点
在实训云平台上配置云主机
howard2005的专栏
02-29 1537
在实训云平台上，通过登录进入系统后，用户需掌握如何熟练地构建网络环境，包括创建路由器和链接子网，以确保不同设备间的通信。此外，用户还需能够创建虚拟网卡，以及管理安全组规则来维护网络安全。关键技能还包括基于特定镜像创建云主机，并使用FinalShell等工具连接到这些主机进行管理和配置，确保其按预期运行。
快速入门uniapp——从环境搭建到项目实践
杜永康的博客
07-04 2790
⭐⭐什么是UniApp？UniApp是一个基于Vue.js的跨平台应用开发框架，它可以帮助开发者使用一套代码构建同时运行在多个平台（包括iOS、Android、Web等）的应用程序。UniApp采用了一种基于原生渲染的方式，通过编译将应用程序转换为原生平台能够识别和运行的代码。UniApp的主要目标是提供一种高效、简单和灵活的开发方式，使开发者能够快速构建跨平台应用程序，无需针对不同平台编写独立的代码。
软件项目开发与实施实训安排.ppt
11-21
实训目的包括熟悉软件项目开发和实施的基本过程，了解软件项目开发的重点、难点，能运用前续课程知识比较熟练地掌握数据库系统的设计、编码和调试，规范化地进行软件项目开发实施，理解软件项目开发实施中不同岗位...
实训项目1 Qt 开发环境的搭建.pdf
11-10
本实训项目旨在帮助初学者掌握Qt开发环境的搭建过程，包括Qt Creator的基本使用、界面布局的了解以及Qt相关工具软件的配置。 一、Qt开发环境搭建的目的与要求 1. 掌握Qt开发环境的搭建方法：理解并熟练执行安装Qt ...
实训项目1 Qt 开发环境的搭建.docx
11-10
通过这个实训项目，不仅能够熟悉Qt开发环境的搭建步骤，还能对Qt Creator的界面布局和基本使用有所了解，为进一步学习和开发Qt应用程序打下坚实的基础。在实际操作过程中，遇到问题可查阅Qt官方文档或社区资源，以便...
大学生毕业设计项目实训 贴吧项目 源代码.zip
01-14
在这个名为“大学生毕业设计项目实训 贴吧项目 源代码.zip”的压缩包中，包含了一份大学生毕业设计的完整项目——一个贴吧类网站的源代码。这个项目旨在帮助学生在实践中提升自己的IT技能，尤其是PHP编程和Web开发的...
10.javaSE基础_JDBC编译程序(Driver+Statement+Connection+mysql数据库连接)
m0_61086522的博客
07-02 1230
JDBC是的缩写。它是Sun的Javasoft公司制定的Java数据库连接技术，是一套标准接口java.sql包中提供了JDBC API,通过它连接到各种数据库系统，编写访问数据库的程序。JDBC API不能直接访问数据库，它依赖于数据库厂商提供的JDBC Driver（JDBC驱动程序）
JVM原理（十一）：JVM虚拟机六种必需对类进行初始化的情况
zuodingquan666的博客
07-03 504
Java虚拟机把描述类的数据从Class文件加载到内存，并对数据进行校验、转换解析和初始化，最终形成可以被虚拟机直接使用的Java类型，这个过程被称作虚拟机的类加载机制。Java天生可以动态扩展的语言特性就是依赖运行期间动态加载和动态链接这个特点实现的。
ShardingSphere
最新发布
Casual_Lei的博客
07-04 626
ShardingSphere 通过提供数据分片、分布式事务、数据加密和读写分离等功能，帮助开发者轻松构建高性能、高可用的分布式数据库系统。其灵活的架构设计和丰富的功能模块，使其成为现代分布式数据库中间件的优秀选择。
java 程序、进程 、线程，cpu，并行、并发、启动线程两种方式
gu2022_3_5_21_23的博客
07-02 309
Thread 方式 线程间不可以共享数据，除非变量加 static 变为 静态变量 （每次创建实例，会有一个新的副本）。条件二： 重写 Thread 父类方法 后创建实例调用 start 方法 （创建匿名子类的匿名对象）条件一： 将创建自实现 Runable 接口后的实例 作为参数传递给 Thread 的构造方法。2、将创建自实现 Runable 接口后的实例 作为参数传递给 Thread 的构造方法。最后调用的都是 Thread 的start 的方法。创建的线程对象，都是Thread类或其子类的实例。
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、付费专栏及课程。

余额充值