接上一个帖子
因为对前端不够了解,后面看了另一个视频教程,用了他的方法搭建了一个vue2的前端项目(配合elementui插件)
https://www.bilibili.com/video/BV1q5411s7wH/?spm_id_from=333.788.recommend_more_video.0
视频在上面,讲的很细致,评论区和弹幕也有对里面一些容易出错的地方进行说明,总的来说"学习氛围"灰常的友好~
提多一嘴,这up主后面转了游戏行业,可以说和我的想法很像,有种遇到知音的感觉哈哈哈
还需要注意的一件事,他只完成了前面的部分,后面的内容比如打包以及发布都没有去讲,可能是后面时间的原因吧
话不多说开整,更新的频率会币之前慢很多,因为这个个人感觉需要真的自己去做到整个流程不出错,再写会比较负责任(虽然没有人看,但是我自己会看(话说本来写帖子的目的就是为了给自己看的))
前端
和上一个帖子的搭建没有太大的出入(回去看了一下,发现居然没有写怎么搭建的,震惊一秒钟)
根据我的回忆,建议直接百度~
流程大概是:下载node.js安装到电脑里
然后通过命令行npm下载vue-cli
这是vue的客户端(我猜的,毕竟把cli展开来就是client了)
新版本的vue-cli可以通过命令行:vue ui
会自动弹出浏览器版的vue可视化界面
有个好处就是对新手比较友好,结构一览无遗,也能直接在这上面创建新的vue项目并且运行测试
坏处就是下载你需要的插件和依赖的时候不能选择版本(这是一个对我来说在一开始很受挫的问题)
java开发的应该都知道,在项目里添加导入依赖如果依赖之间的版本不兼容的话,在使用和打包的时候会出现很多不必要的问题
在视频里up使用的less和less-loader这两个一看就知道是搭配的,所以他们的版本需要配合起来,我使用的less是3.0.0,less-loader是5.0.0
less-loader最好使用5.0.0,因为视频里的弹幕是这么推荐的,less用3.0.0是因为用了5.0.0的less-loader他就规定你必须要用3.0.0的版本,否则运行的时候就会直接报错了
还有很多诸如此类的问题,那么版本应该怎么自己选择呢,百度得知
在cmd,找到你的项目根目录,命令行执行: npm(如果网络不好的话使用镜像-cnpm) install 你要下载的文件名@版本号 --save --dev(后面这两个不知道是啥,可加可不加,运行和打包的时候没啥影响)
然后去下载你需要的插件和依赖即可(在视频里还用到的依赖有axios-好像是解决跨域问题的.插件:element(如果是vue2创建的项目就搜下element,如果是vue3创建的就搜element-plus),弹幕是这么提示的,我用的和up的一样是vue2,没试过3是什么情况)
至此项目的环境就基本搭建完成了,我用的是vscode编辑器,其实啥编辑器都可以
然后就是删掉一些不用的vue界面就可以开始写页面了
这里提一嘴,用vue写页面和以前有很大的不同.可以说开拓了我的整个前端的世界观
原理还没有研究过,看着像通过设置路由,然后vue自己的框架通过这些路由去渲染和呈现不同的vue的内容,和以前一个页面就是一个html/jsp不一样,这样 方便了很多,不过新手(用过jsp)可能需要时间去适应
反正这里面需要template标签作为一个模块,如果和我一样用了elementui的话就需要按照elementui的结构去书写,否则会报错
这里再提一嘴,如果你的vue在写完之后发现访问不出来,可以试着先在vue里添加rout-view标签,提示浏览器去渲染刚刚写完的界面(猜测可能是缓存或其他原因),也就是你是没错的,是程序没跟上
前端的语法相比java简单一些,没有太多的约束,可能是写过java和c#所以上手不难.就是一些组件的样式约束比较麻烦,有的时候写了样式发现他被限制了用不了,需要用其他的方式去写,有时候是需要在样式前加:等等
反正是不容易,花了两天时间还是没太整明白,后面还是让专业的来吧
反正至少基本功能能实现就好
登陆界面
使用input组件获得用户输入的信息,然后通过this$http.post()请求后端获得回调数据即可
主界面
需要使用element的布局,导航栏等组件,这里需要设置路由,在点击左边导航栏的时候右边能显示对应的界面内容
显示数据
通过点击事件请求后台数据通过回调显示出来即可
打包
在项目的目录下执行命令行:npm run build
这里注意一下,打包出来的项目双击dist目录里的index.html如果没有反应的话需要自己在项目的根目录新建一个vue.config.js的脚本,在里面写上下面内容
module.exports = {
assetsDir: 'static',
parallel: false,
publicPath: './',
productionSourceMap: false,//不生成map文件
}
然后重新打包即可
前端部署-本地
自己测试的话直接双击打包出来的dist里的index.html就好了(有数据交互的话后端也需要打开)
一般是部署到nginx上(能解决跨域问题)
下载nginx,然后把打包出来的dist放在nginx目录里的html下(nginx默认是访问这里的内容,可以修改)
然后双击nginx.exe/命令行:start nginx
如果任务管理器里有nginx说明运行成功,如果没有的话需要卡在nginx文件里的logs打开error.logs查看出错的日志分析原因(我这里在公司的电脑里发现是80端口被占用了,所以修改了nginx运行的端口号)
怎么修改nginx的配置呢
在conf目录里有一个nginx,conf,用记事本或其他能编辑文本的程序打开之后找到如下图的server的listen,可以修改端口号
在location/{
}
里面可以修改默认访问的路径,默认的话他是root html
也即是默认html为访问的根目录,如果dist是放在html的话,那么当你访问项目的dist的index.html的话
访问路径就是localhost:81/dist/index.html
如果修改成像我这样的html/dist/
那么nginx就会默认访问的根目录为html/dist/
那么这个时候你只需要在浏览器里输入localhost:81/index.html即可,这样就方便很多
还有一个,如果nginx调用命令行的时候报错没有到nginx.pid的话,执行这个命令让他去生成就好了
nginx -c conf/nginx.conf
然后再执行你需要的命令行
------------------------------------------------------------------------------分隔符-----------------------------------------------------------------------------------------------
后端
使用springboot开发
在idea编辑器里点击新建项目,找到springinitial,然后添加需要的依赖(jdbc-api,mybatis-framework,mysql driver,还有好像是springweb)主要是添加和mysql交互的依赖
然后添加需要的插件
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
springboot基本就是面向注解开发
controller,service,mapper,requestmappign等,因为写过后端所以这里就不过多说明,视频里也讲的挺好的,不过视频里没有service层,新手的话如果项目逻辑不复杂可以不写service,直接controller和dao就好了
主要还是和mysql的交互,需要mapper.xml进行映射,书写sql语句,搭建环境
application.yml 写好端口号和数据库的访问信息
映射
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.alertdemo01.dao.EventDao">
</mapper>
还有一个视频里解决跨域问题的类
然后写自己的逻辑就好了
部署
打包
重写springboot的启动类
然后在编辑器右边打开maven,在生命周期里先clean,然后package,打包过程如果提示报错,可以先
点击红框里的跳过test,直接打包
打包成功后在编辑器左边的target目录里找到项目名称.jar
使用tomcat
下载然后在里面的webapps放如上面打包好的jar包
在当前目录下cmd命令行,执行:java -jar jar包
即可
总结
至此,简单的从前端到后端的项目搭建和部署-本地的逻辑和流程完成
中间的部分因为项目隐私和还没有完全开发完,所以不做过多的展示,后端的分页查询,前端的分页显示,搜索功能这些都还没做,不过这些问题都不大.总的来说重温了一遍发现开发后台系统可比写游戏简单多了~…个人认为
加油吧
1759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
