前言
上节我们已经完成了基础的开发环境准备,本节主要从面向初学者从创建前后端项目开始,讲的会比较详细,如果已经有过几次创建项目的经验,可以忽略本节,让我们开始吧!
一、后端项目创建
(一)创建项目
1.打开idea,创建新项目
2.左边生成器选择Spring Initiaizr
3.名称这里我起的是ruoxi,如果你是初学者,建议名称和我一样吧,为了方便后面直接copy代码,否则还要改包名很麻烦。
4.语言选择 Java
5.类型选择Maven
6.JDK选择jdk17
7.具体配置参考下图:
8.依赖就选择一个Spring Web即可,然后创建。(其它依赖我会将pom文件粘贴出来)
9.删除不必要的文件
10.创建如下目录,注意RuoxiApplication类的路径,必须在com.ruoxi包下,该类需要在所有类的最顶层路径上。
(三)Hello World 示例
在controller包中创建HelloWorldController
@RestController
public class HelloWorldController {
@RequestMapping("/hello")
public String helloWorld() {
return "Hello World!";
}
}
编辑application.yml文件,这里主要指定程序运行端口及访问根路径
server:
port: 8080
servlet:
context-path: /ruoxi
启动springboot项目。
方式一:右键RuoxiApplication,单击“运行”;
方式二:单击idea窗口顶部“运行”按钮。
控制台如下图所示,无任何错误,说明项目启动成功!标注的地方说明了程序的运行端口及根路径。
打开浏览器输入http://localhost:8080/ruoxi/hello就可以看到“hello word”了。其中localhost为本机地址,8080为程序运行端口,/ruoxi为程序根路径,/hello为我们在HelloWorldController中定义的接口路径。访问效果如图:
如果在浏览器中成功展示hello world!说明后端项目搭建没有问题啦,如有问题,欢迎留言共同探讨解决。
二、创建前端项目
(一)创建项目
进入后端项目文件夹,通过cmd打开当前文件夹,如下图:
(如果是win10系统,右键菜单里可能没有”在此处打开命令窗口”,如果需要,可以关注微信公众号“小马马冲冲冲”,回复“右键cmd”即可免费获取对应的注册项脚本)
执行命令npm init vue,后续内容可参考下图,我选择‘否’的读者可以更据自己情况选择‘是’,我选择‘是’的,建议和我一样选择‘是’。
此时我们的项目文件下就会多出来一个ui-ruoxi-admin的文件夹,如图:
右键菜单“通过Code打开”,如图:
进入vscode后,先确认下自己打开的文件是否正确,打开后确保根路径为‘ui-ruoxi-admin’;到这里我们前端项目就创建成功了,下面我们同样写一个hello word来体验一下。
(二)H ello world 示例
删除src文件夹下的所有内容;在src文件夹下创建App.vue文件,内容如下:
<script setup></script>
<template>
<router-view></router-view>
</template>
<style scoped></style>
创建一个用于展示hello world 的页面,在src文件夹下创建目录及文件view/HelloWorldView.vue文件,内容如下:
<script setup></script>
<template>
<div>Hello World</div>
</template>
<style scoped></style>
注册页面路由,在src文件夹下创建目录及文件router/index.js文件,内容如下:
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/hello',
component: () => import('@/views/HelloWorldView.vue')
}
]
})
export default router
创建全局css样式,在src文件夹下创建目录及文件assets/main.css文件,内容如下:
html,body,#app{
height: 100%;
width: 100%;
padding: unset;
margin: unset;
}
下载vue依赖,打开控制台,执行指令npm i
一切准备就绪,开始运行项目;方式一:控制台执行 npm run dev
方式二:勾选左侧资源管理器的npm脚本 选项,然后展开底部的 npm脚本 框,点击 dev选项的右侧运行按钮。
正常情况下,运行无论哪种方式,运行成功后控制台会显示下图内容:
http://localhost:5173/ 即为项目地址,在注册路由时,我们对helloword页面定义的路径是/hello,那么访问http://localhost:5173/hello即可。
三、vscode配置
这里我把自己的vscode使用的插件及配置放出来供大家参考,都是一些我认为在写代码过程中比较好用的配置。
插件列表
vscpde设置
{
//ESLint 设置
"eslint.validate": ["javascript", "vue"],
//编辑器 设置
"editor.fontSize": 16,
"editor.tabSize": 2,
"editor.minimap.enabled": false, //关闭快速预览
"editor.formatOnSave": true,
"editor.suggestSelection": "first",
"editor.linkedEditing": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
//命令窗口设置
"terminal.integrated.defaultProfile.windows": "Command Prompt",
"terminal.integrated.tabs.enabled": true,
"terminal.integrated.tabs.location": "left",
//git 设置
"git.autofetch": true,
"git.enableSmartCommit": true,
"git.ignoreMissingGitWarning": true,
//主题设置
"workbench.colorTheme": "One Dark Pro",
"explorer.confirmDelete": false,
"security.workspace.trust.untrustedFiles": "open",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
.prettierrc.json
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": true,
"tabWidth": 2,
"singleQuote": false,
"printWidth": 180,
"trailingComma": "none"
}
以上就是本节内容啦,简单的创建项目教程,下节我们开始写登录业务逻辑。在本节遇到什么问题欢迎留言共同探讨解决!