欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

WEB入门总结(一)创建项目

程序员文章站 2022-05-24 18:14:03
...
胡乱一些话

我在看视频的时候,突如其来,想写一篇WEB总结,所以就放下手头的东西, 趁着我脑袋里的东西还热乎时,看看能不能挤出一点“精华”来。

从2月到6月,整整四个月,虽然学习WEB的过程是断断续续的,但学习它的痛苦却是一直持续着。 百感交集,废话少说,我从创建项目(搭建环境略)开始。不过因为一开始也没有要记笔记的意识,所以可能久远的东西也记得不大清楚。

万事找度娘。

小白一枚,如果有什么地方不对欢迎指出来!期待与大家共同学习一起进步嘻嘻!

一、开发环境

开发工具:IntelliJ IDEA2019
前端:VUE+Element UI
后端:Spring Boot
数据库:Mysql 8(MySQL workbench)
服务器:Tomcat 9
其他:Jdk 8、node.js、vue cli

二、创建项目

1.创建project
1)IDEA创建项目

WEB入门总结(一)创建项目WEB入门总结(一)创建项目
WEB入门总结(一)创建项目
上图的war包是为了之后部署到外部tomcat用的。
WEB入门总结(一)创建项目
WEB入门总结(一)创建项目
WEB入门总结(一)创建项目

2)import maven [install]

详情指路去maven篇:

https://blog.csdn.net/PLCET/article/details/106960898

WEB入门总结(一)创建项目

3)添加index.html

在src\main\resources\static下添加index.html

WEB入门总结(一)创建项目
WEB入门总结(一)创建项目

<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=utf-8>
    <title>front</title>
</head>
<body>
    <h1>Hello world!</h1>
</body>
</html>
4)启动springboot服务器

WEB入门总结(一)创建项目
打开浏览器,输入http://127.0.0.1:8080/,显示
WEB入门总结(一)创建项目

2.搭建前端开发环境
1)创建vue项目

(1)创建前端项目front

在idea下找到终端Terminal,并在项目目录下输入:

vue create front

WEB入门总结(一)创建项目
选中vue路由(Router)和vue状态管理方案(Vuex)。
WEB入门总结(一)创建项目
WEB入门总结(一)创建项目
(2)执行前端项目
WEB入门总结(一)创建项目

cd front
npm run serve

cd是命令提示符,切换目录的命令。
常用的还有:

  • 键盘 ↑ 可以使用历史命令,超级方便。
  • ctrl+c 可以终止终端的操作。不用像我以前一样傻傻的关闭重开关闭重开。

想详细了解cmd命令的可以看看这篇:“cmd常用命令”:

https://blog.csdn.net/fly_fly_fly_pig/article/details/82592428

WEB入门总结(一)创建项目
点击Local链接或者在浏览器输入http://localhost:8080/, 如显示如下内容,则vue 脚手架搭建成功。
WEB入门总结(一)创建项目

2)安装Element UI

(1)安装Element UI

记得要在front目录下:

npm i element-ui -S

WEB入门总结(一)创建项目
(2)添加 Element plugin

vue add element 

WEB入门总结(一)创建项目
WEB入门总结(一)创建项目
(3)执行前端项目

npm run serve

WEB入门总结(一)创建项目
点击Local链接或者在浏览器输入http://localhost:8080/, 如显示el-button,则安装成功。

WEB入门总结(一)创建项目

3.合并前后端开发环境
1)配置前端输出目录

在front目录下,即与package.json同一级目录下,新建配置文件vue.config.js。
WEB入门总结(一)创建项目

// vue.config.js
module.exports = {
    // 设置相对路径
    publicPath: './',
    // 输出文件目录
    outputDir: '../src/main/resources/static',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    //生产环境是否生成 sourceMap 文件
    productionSourceMap: false,
    devServer: {
        port: 8080
    }
};

详细的配置可以看这“vue.config.js 配置”:

https://www.jianshu.com/p/b358a91bdf2d

2)打包前端文件

打开终端“Terminal”,在front目录下输入:

npm run build

将前端项目打包输出到了springboot根目录下。
WEB入门总结(一)创建项目
打包后:
WEB入门总结(一)创建项目

3)修改服务器端口

(1)前端:端口8085

端口号默认8080,但易被占用,图省事,我习惯性会修改端口号。
WEB入门总结(一)创建项目
(2)springboot服务器:端口8086

在springboot配置文件内修改:
WEB入门总结(一)创建项目
WEB入门总结(一)创建项目

4.外部tomcat war部署

详情指路去外部tomcat篇:(待补充)

相关标签: WEB项目 web