-
新建一個項目，選擇Spring Initializr ，點擊next
image.png -
填寫group 和 artifact ，點擊next，出現如下界面
image.png - 注意勾選springWeb， JDBC API， Mybatis framework, MySQL Driver，一直next即可
- 在src/main/resources中新建一個application.yml（可選，本身的application.properties也可）
- 在src/main/resources下新建一個mapper文件夾
- 要在application.yml文件中編寫一些配置文件（mysql ，mybatis和 server）
# mysql
spring:
datasource:
#MySQL配置
driverClassName: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/easyproject?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=UTC
username: root
password: root
mybatis:
mapper-locations: classpath:mapper/*.xml
type-aliases-package: com.example.demo.model
server:
port: 9000
-
運行，并且在瀏覽器中輸入localhost:9000（server中我自己配置的是9000），出現以下界面，即成功
image.png
@RequestMapping **注解為控制器指定可以處理哪些 URL 請求
@Controller 注解是專門用于處理 Http 請求處理的，是以 MVC 為核心的設計思想的控制層
@RestController：@Controller和@ResponseBody的合集，用于標注控制層組件（如struts中的action），配置在controller層表示該控制層里面的方法是以json的格式進行輸出。
前后端分離的項目要注意跨域請求，以前不分離的項目都是配置在同一個tomcat下，但是前后端分離的項目，前端在一個tomcat下，后端在一個tomcat下，因此需要處理跨域請求
跨域，指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對JavaScript施加的安全限制。
所謂同源是指，域名，協議，端口均相同，不明白沒關系，舉個栗子：
http://www.123.com/index.html 調用 http://www.123.com/server.PHP （非跨域）
http://www.123.com/index.html 調用 http://www.456.com/server.php （主域名不同:123/456，跨域）
http://abc.123.com/index.html 調用 http://def.123.com/server.php（子域名不同:abc/def，跨域）
http://www.123.com:8080/index.html調用 http://www.123.com:8081/server.php（端口不同:8080/8081，跨域）
http://www.123.com/index.html 調用 https://www.123.com/server.php（協議不同:http/https，跨域）
請注意：localhost和127.0.0.1雖然都指向本機，但也屬于跨域。
瀏覽器執行javascript腳本時，會檢查這個腳本屬于哪個頁面，如果不是同源頁面，就不會被執行。
當域名www.abc.com下的js代碼去訪問www.def.com域名下的資源，就會受到限制。
@CrossOrigin可以處理跨域請求，讓你能訪問不是一個域的文件。
這個注解放在某個方法上，這個方法就跨域了，放在整個controller上，整個controller就跨域了
- 在src/main/java/<自己定義的包名>下新建util文件夾，再新建一個WebConfig 的java class ，這個文件是做一些web配置，來處理跨域請求
@Configuration用于定義配置類，可替換xml配置文件
- 創建前端項目，在終端輸入vue ui，會打開一個瀏覽器，選擇自己想要在的文件夾，創建vue項目,填寫名稱，包管理器選擇npm，git 填寫 init project ，點擊next， 選擇手動，點擊next，選擇使用配置文件，Router，css， 將Linter/Formatter去掉，點擊next
- 選擇插件，添加插件，element ui， 安裝element ui， 安裝完成后，一定要選擇完成安裝，讓該插件安裝到項目中
- 選擇依賴，添加依賴， axios，less-loader，less
-
點擊任務，點擊serve，點擊運行，項目就已經啟動成功了，點擊啟動app，出現以下界面，即vue已經創建好了
image.png - 用idea 或者vscode打開該項目，在src下有app.vue，里面就是界面，把一些沒有用的刪掉，
<template>
<div id="app">
App 根結點
</div>
</template>
<script>
</script>
<style>
</style>
此時，界面會變成這樣
項目中只能有一個id叫做app的
- 把views下的About.vue Home.vue 刪掉，然后將報錯的文件中和她們相關的配置都刪掉即可
目錄結構中，public 放置一些公共的東西， node_moudles 放置后臺中的jar包，src中放置自己寫的代碼， src/assets 是一些公共資源（such as 樣式）, src/plugin是自己的插件，src/components 是自己寫的一些組件，main.js : 引入第三方的資源或者自己的全局配置
在vue中開發不會選擇普通的html，而是用組件的形式
- 在components中新建文件Login.vue,書寫模版如下
<template>
<!-- 一定加上div，需要有一個根div的存在-->
<div>
</div>
</template>
<script>
export default {
}
</script>
<!--書寫樣式-->
<style lang = "less" scoped>
</style>
在上述div塊中寫入 “login 頁面”， 刷新界面，會發現界面沒有變化，因為在index.vue中還沒有配置路由
- 在index.vue中首先引入剛才的login
import Login from '../components/Login'
然后在配置路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login'
Vue.use(VueRouter)
const routes = [
{
path : "/",
redirect : "/login"
},
{
path : "/login",
component : Login
}
]
const router = new VueRouter({
routes
})
export default router
在App.vue的div塊中的內容刪掉，刷新界面會發現界面變空，再寫入<router-view></router-view> 如下
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
</script>
<style lang="scss">
</style>
刷新界面，即可看到如下界面
- 再 Login.vue中寫入如下代碼
<template>
<!-- 一定加上div，需要有一個根div的存在-->
<div class = "login_container">
<div class= "login_box">
<div class="avatar_box">
<img src="../assets/logo.png" alt/>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<!--書寫樣式-->
<style lang = "less" scoped>
</style>
如下界面
但是由于這個圖標的樣式什么的不美觀，因此要調整樣式
- 添加全局樣式 assets/css/global.css
/*全局樣式*/
html,body,#app{
height: 100%;
margin: 0;
padding:0;
}
還要引入 到main.js 中，因為main.js是全局的
import './assets/css/global.css'
17.添加login等組件，在Login.vue中寫入
<template>
<!-- 一定加上div，需要有一個根div的存在-->
<div class = "login_container">
<!-- 登陸塊-->
<div class= "login_box">
<!-- logo-->
<div class="avatar_box">
<img src="../assets/logo.png" alt/>
</div>
<!-- 表單區域-->
<el-form ref="loginFormRef" :model="loginForm" class = "login_form" label-width="0">
<!-- 用戶名-->
<el-form-item >
<el-input v-model="loginForm.username " prefix-icon="el-icon-user"></el-input>
</el-form-item>
<!-- 密碼-->
<el-form-item >
<el-input v-model="loginForm.password" prefix-icon="el-icon-search"></el-input>
</el-form-item>
<!-- 按鈕-->
<el-form-item >
<el-button type="primary" disabled>提交</el-button>
<el-button type="info" disabled>重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
loginForm : {
username : "用戶名",
password : "password"
}
}
}
}
</script>
<!--書寫樣式-->
<style lang = "less" scoped>
</style>
以上代碼中所有的組件都是從element ui中尋找的
刷新界面，如下所示：
-
更改表單樣式中的圖標
在iconfont中，選在好自己想要的圖標（我自己是找了用戶名和密碼的圖標試試水）然后下載到本地，更改文件名為font，放到項目的assets文件夾下，再通過文件夾下的demo_index.html 文件，查看如何使用圖標
image.png
由上圖可知，圖標已更改
樣式很難看，所以現在開始進行樣式添加
- 打開login.vue，在<style>標簽中進行添加樣式
<!--書寫樣式-->
<style lang = "less" scoped>
//根結點樣式
.login_container {
background-color: #2b4b6b;
height: 100%;
}
.login_box {
width: 450px;
height: 300px;
background-color: #fff;
border-radius: 3px; //邊框圓角
position: absolute; //絕對定位，有了絕對定位以后才好向左向右移動
left: 50%; //居左居中
top: 50% ; //居上居中
transform: translate(-50%, -50%);
}
</style>
可以看到結果如下
translate:移動，transform的一個方法
通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 坐標） 和 top（y 坐標） 位置參數
- 給頭像做一個樣式大小的調整，還有各種樣式的調整
<!--書寫樣式-->
<style lang = "less" scoped>
//根結點樣式
.login_container {
background-color: #2b4b6b;
height: 100%;
}
.login_box {
width: 450px;
height: 300px;
background-color: #fff;
border-radius: 3px; //邊框圓角
position: absolute; //絕對定位，有了絕對定位以后才好向左向右移動
left: 50%; //居左居中
top: 50% ; //居上居中
transform: translate(-50%, -50%);
.avatar_box{
width: 130px;
height: 130px;
border: 1px solid #eee;
border-radius: 50%;
padding: 5px;
box-shadow: 0 0 2px #ddd;
position: absolute; //絕對定位，有了絕對定位以后才好向左向右移動
left: 50%; //居左居中
//top: 50% ; //居上居中
transform: translate(-50%, -50%);
background-color: #0ee;
img{
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #eee;
}
}
.btns{
display: flex;
justify-content: flex-end;
}
.login_form{
position: absolute;
bottom: 0%;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
}
</style>
border : 邊框
border-radius：圓角
box-shadow 屬性用于在元素的框架上添加陰影效果
content-box 是默認值。如果你設置一個元素的寬為100px，那么這個元素的內容區會有100px 寬，并且任何邊框和內邊距的寬度都會被增加到最后繪制出來的元素寬度中。
border-box 告訴瀏覽器：你想要設置的邊框和內邊距的值是包含在width內的。也就是說，如果你將一個元素的width設為100px，那么這100px會包含它的border和padding，內容區的實際寬度是width減去(border + padding)的值。大多數情況下，這使得我們更容易地設定一個元素的寬高。
絕對定位是相對于父標簽決定位置，一般用于相對定位標簽里面，JS特效經常用到。
相對定位是相對于上一個相對定位的。一般用于浮動定位標簽里面，一般跟絕對定位配合使用。
- 預檢測
1.添加校驗屬性 - 編寫校驗規則
- 校驗元素和規則對應的標簽進行綁定
在表單區域加上rules ，在表單區域的下級標簽加上prop，再在<script>標簽下加入rules的具體實現方法，具體請關注https://element.eleme.cn/#/zh-CN/component/form
<template>
<!-- 一定加上div，需要有一個根div的存在-->
<div class = "login_container">
<!-- 登陸塊-->
<div class= "login_box">
<!-- logo-->
<div class="avatar_box">
<img src="../assets/logo.png" alt/>
</div>
<!-- 表單區域-->
<el-form ref="loginFormRef" :rules="loginRules" :model="loginForm" class = "login_form" label-width="0px">
<!-- 用戶名-->
<el-form-item prop="username">
<el-input v-model="loginForm.username " prefix-icon="iconfont icon-user"></el-input>
</el-form-item>
<!-- 密碼-->
<el-form-item prop="password">
<el-input v-model="loginForm.password" prefix-icon="iconfont icon-mima"></el-input>
</el-form-item>
<!-- 按鈕-->
<el-form-item >
<el-button type="primary" disabled>提交</el-button>
<el-button type="info" disabled>重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
//表單數據
data() {
return {
loginForm : {
username : "用戶名",
password : "password"
},
//驗證
loginRules:{
//校驗用戶名
username: [
{required:true, message:"用戶名", trigger:'blur'}, //必填項
{ min: 5, max: 12, message: '長度在 5 到 12 個字符', trigger: 'blur' } //長度驗證
],
//校驗密碼
password: [
{required:true, message:"用戶密碼", trigger:'blur'}, //必填項
{ min: 6, max: 10, message: '長度在 6 到 10 個字符', trigger: 'blur' } //長度驗證
],
},
}
}
}
</script>
<!--書寫樣式-->
<style lang = "less" scoped>
//根結點樣式
.login_container {
background-color: #2b4b6b;
height: 100%;
}
.login_box {
width: 450px;
height: 300px;
background-color: #fff;
border-radius: 3px; //邊框圓角
position: absolute; //絕對定位，有了絕對定位以后才好向左向右移動
left: 50%; //居左居中
top: 50% ; //居上居中
transform: translate(-50%, -50%);
.avatar_box{
width: 130px;
height: 130px;
border: 1px solid #eee;
border-radius: 50%;
padding: 5px;
box-shadow: 0 0 2px #ddd;
position: absolute; //絕對定位，有了絕對定位以后才好向左向右移動
left: 50%; //居左居中
//top: 50% ; //居上居中
transform: translate(-50%, -50%);
background-color: #0ee;
img{
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #eee;
}
}
.btns{
display: flex;
justify-content: flex-end;
}
.login_form{
position: absolute;
bottom: 0%;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
}
</style>
- 重置按鈕
在main.js中引入axios
import axios from "axios"
//掛載axios
Vue.prototype.$http = axios
//設置訪問跟路徑
axios.defaults.baseURL = "http://localhost:9000"
在按鈕中加入 @click="resetLoginForm
<!-- 按鈕-->
<el-form-item >
<el-button type="primary" >提交</el-button>
<el-button type="info" @click="resetLoginForm">重置</el-button>
</el-form-item>
在<script>中加入
resetLoginForm(){
this.$refs.loginFormRef.resetFields();
},
- 加入新頁面，在component下創建Home.vue,并且記得一定要在index.js 中導入它,并且把路徑配置一下
import Home from '../components/Home'
{
path : "/home",
component: Home
}
home.js
<template>
<div>
Home 首頁！！！
</div>
</template>
<script>
</script>
<style>
</style>
在Login.vue中實現跳轉
此時后端一定要開著
login(){
this.$refs.loginFormRef.validate(async valid => {
if(!valid) return;
const {data:res}=await this.$http.post('test'); //解析res
console.log(res);
if(res == "ok") {
this.$message.success("操作成功！！！")
this.$router.push({path:"/home"})
}else{
this.$message.error("操作失敗！！！")
}
})
}
