目次
3.4.1. vue-axios をダウンロードしてインストールする
3.4.2. グローバル設定を追加する API モジュールを作成する
3.4.3、main.js で vue-axios を設定する
3.4.3. カプセル化された axios を使用してリクエストを送信する
1. ログインおよび登録インターフェイスを実装する
1. 事前準備
vue-cliを使用してSPA プロジェクトをビルドします。
- プロジェクトを作成するディレクトリの場所を入力します
- コマンドvue init webpack project nameを使用して、vue プロジェクトをビルドします。
vue init webpack element_ui_spa- コマンドnpm install element-ui -S を使用して、 Element-UIモジュールを追加します
- npm install element-ui -S : その後ろに -s があります。それらは次のとおりです。
- -g : node_globalグローバル依存関係をダウンロードします。
- -d : 依存関係 da をspaプロジェクトにダウンロードし、パッケージ化には参加しません。
- -s : 依存関係 da をspaプロジェクトにダウンロードし、パッケージ化に参加します。
- プロジェクトのpackage.jsonファイルを開いて、追加された特定のモジュール情報を表示します。
- srcディレクトリにviewsディレクトリを作成します(このディレクトリは vue コンポーネントを保存するために使用されます)。
- main.jsにelement-uiモジュールを導入する
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' // 新添加1 import ElementUI from 'element-ui' // 新添加2，避免后期打包样式不同，要放在import App from './App';之前 import 'element-ui/lib/theme-chalk/index.css' import App from './App' import router from './router' // 新添加3----实例进行一个挂载 Vue.use(ElementUI) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: {App}, template: '<App/>' })指定された場所!!! 指定された場所!!! 指定された場所!!!---3 行のコードを追加します
2. ログイン静的ページの実装
2.1. Vue コンポーネントの作成
ログイン登録 vue コンポーネントをsrcに作成します。
2.2. 静的ページの実装
HTML スタイルを設定します。もちろん、コンポーネント | 要素で自分でカスタマイズすることもできます
<template>
<div class="Login">
<el-form class="login-container">
<h1 class="title">用户登录</h1>
<el-form-item label="">
<el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="">
<el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
</el-form-item>
<el-row style="text-align: center;margin-top:-10px">
<el-link type="primary">忘记密码</el-link>
<el-link type="primary" @click="gotoRegister()">用户注册</el-link>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
msg: "登录界面",
username: "",
password: ""
}
},
methods: {
gotoRegister() {
this.$router.push("/Register");
},
doSubmit() {
}
}
}
</script>
<style scoped>
.login-wrap {
box-sizing: border-box;
width: 100%;
height: 100%;
padding-top: 10%;
background-image: url(https://pic4.zhimg.com/v2-c5880f5a6d44766feb085c3ae94899c7_r.jpg);
//background-image: url();
background-repeat: no-repeat;
background-position: center right;
background-size: 100%;
}
.login-container {
border-radius: 10px;
margin: 0px auto;
width: 350px;
padding: 30px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
text-align: left;
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
</style>
2.3. ルーティングの設定
router /index.jsの vue プロジェクトのデフォルトの表示ルートを変更します
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/Login',
name: 'Login',
component: Login
}
]
})
2.4. App.vue スタイルの変更
元の<style>スタイルを変更する
<template> <div id="app"> <!-- <img src="./assets/logo.png"><br>--> <br> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> html, body { width: 100%; height: 100%; box-sizing: border-box; padding: 0px; margin: 0px; } #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; widows: 100%; height: 100%; } </style>
2.5. 効果
3. 静的ページ実装の登録
ログインに基づいて同じ操作を実装します
3.1. 静的ページの実装
<template>
<div class="Register">
<el-form class="login-container">
<h1 class="title">用户注册</h1>
<el-form-item label="">
<el-input type="text" v-model="username" placeholder="注册账号" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="">
<el-input type="password" v-model="password" placeholder="注册密码" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
</el-form-item>
<el-row style="text-align: center;margin-top:-10px">
<el-link type="primary">忘记密码</el-link>
<el-link type="primary" @click="gotoLogin()">用户注册</el-link>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
name: "Register",
data() {
return {
msg: "注册界面",
username: "",
password: ""
}
},
methods: {
gotoLogin() {
this.$router.push("/Login");
},
doSubmit() {
}
}
}
</script>
<style scoped>
.login-wrap {
box-sizing: border-box;
width: 100%;
height: 100%;
padding-top: 10%;
background-image: url();
background-repeat: no-repeat;
background-position: center right;
background-size: 100%;
}
.login-container {
border-radius: 10px;
margin: 0px auto;
width: 350px;
padding: 30px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
text-align: left;
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
</style>
3.2. ルーティングの設定
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Register from '@/views/Register'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/Login',
name: 'Login',
component: Login
},
{
path: '/Register',
name: 'Register',
component: Register
}
]
})
3.3. 効果
二、アクシオス
SSM プロジェクトを使用して Java バックエンドを構築し、ユーザー ログイン用のアクション アドレスの提供をシミュレートし、Vue が指定されたユーザー ログイン インターフェイスを要求します。
1. 事前準備
1.1. プロジェクトの準備
SSM プロジェクト、Maven プロジェクト、SpringMVC プロジェクトなど、自分で完成したプロジェクトを用意する必要がありますが、書き方がわからない場合は、以前のブログコンテンツSpring シリーズ_セルフできない人のブログを参照してください。規律-CSDN ブログ。
1.2. axiosのインストール
ダウンロードするプロジェクトに CMD ウィンドウを入力します。プロジェクト ファイル パスに CMD ウィンドウを入力する必要があります。
npm i axios -S
ダウンロードした内容はpackage.jsonで確認できます。
1.3. ポートの変更
config /index.jsディレクトリ内の vue プロジェクトの実行ポートを変更します。
2.GETリクエスト
2.1. 軸のインポート
ログインした vue ファイルに必要な axios をインポートします。
import axios from 'axios'
2.2. ライトゲットリクエスト
テストするときは必ずプロジェクトを開いてください
//提交事件
doSubmit() {
//设置登录访问地址
let url = "http://localhost:8080/ssm/user/userLogin";
// 使用json格式进行传值
let params = {
username: this.username,
password: this.password
}
//get请求
axios.get(url, {params: params}).then(r => {
console.log(r);
if (r.data.success) {//判断success是否为true
// 为true给一个提示框
this.$message({
//message: '登陆成功',
message: r.data.msg,
type: 'success'
});
} else {
this.$message({
//message: '登陆失败',
message: r.data.msg,
type: 'warning'
});
}
}).catch(e => {
// console.log(e);
});
}
3.POSTリクエスト
3.1. get と post の違い
GET リクエストと POST リクエストは 2 つの一般的な HTTP リクエスト メソッドですが、それらの違いは次のとおりです。
- データ送信方法: GET リクエストは URL パラメータを通じてデータを送信し、POST リクエストはリクエストボディを通じてデータを送信します。GET リクエストのデータは URL の末尾に追加され、URL アドレス バーに表示されます。一方、POST リクエストのデータはリクエスト本文に配置され、URL には公開されません。
- データ長制限: GET リクエストのデータは URL に追加されるため、URL の長さは制限されており、通常は約 2048 文字です。この制限を超えると URL が長くなり、POST リクエストには明確なデータが含まれなくなります。長さの制限。
- セキュリティ: GET リクエストのパラメータは平文で URL に追加されるため、機密情報の送信には適していませんが、POST リクエストのデータはリクエスト本文に配置され、比較的安全です。
- キャッシュ: GET リクエストはブラウザーでキャッシュでき、再利用できますが、POST リクエストはブラウザーでキャッシュできないため、毎回リクエストを再送信する必要があります。
- 特殊文字の処理: GET リクエストはスペースなどの特殊文字を URL エンコードし、「%20」に置き換えますが、POST リクエストは特殊文字をエンコードしません。
- 冪等: GET リクエストは冪等です。つまり、複数の同一のGET リクエストがサーバーに副作用をもたらすことはありませんが、POST リクエストは冪等ではなく、各POST リクエストにはリソースの作成やデータの変更などの副作用が発生する可能性があります。
3.2. qsのインポート
上記のリクエストと同様に、axios をインポートする方法ですが、引き続き qs をインポートします。
import qs from 'qs'
3.3. 書き込みポストリクエスト
get リクエストとの唯一の違いは、
- get：axios.get(url, {params: params} ).then(r => {}).catch(e => { });
- 投稿: axios.get(url, qs.stringify(params) ).then(r => {}).catch(e => { });
//提交事件 doSubmit() { //设置登录访问地址 let url = "http://localhost:8080/ssm/user/userLogin"; // 使用json格式进行传值 let params = { username: this.username, password: this.password } //post请求 axios.post(url, qs.stringify(params)).then(r => { console.log(r); if (r.data.success) {//判断success是否为true // 为true给一个提示框 this.$message({ //message: '登陆成功', message: r.data.msg, type: 'success' }); } else { this.$message({ //message: '登陆失败', message: r.data.msg, type: 'warning' }); } }).catch(e => { // console.log(e); }); }
3.4. 最適化処理
3.4.1. vue-axios をダウンロードしてインストールする
CMD コマンド ウィンドウで vue-axios をダウンロードします。
3.4.2. グローバル設定を追加する API モジュールを作成する
src ディレクトリに新しい API フォルダーを作成し、以下の 2 つのファイルaction.jsとhttp.jsを作成します。
3.4.2.1、action.js
/**
* 文件接口地址定义文件
* 对后台请求的地址的封装，URL格式如下：
* 模块名_实体名_操作
*/
export default {
'SERVER': 'http://localhost:8080/ssm', //服务器访问地址
'SYSTEM_USER_DOLOGIN': '/user/userLogin', //登陆请求
'SYSTEM_USER_DOREG': '/user/userRegister', //注册请求
'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
return this.SERVER + this[k];
}
}
3.4.2.2、http.js
/**
* vue项目对axios的全局配置
*/
import axios from 'axios'
import qs from 'qs'
//引入action模块，并添加至axios的类属性urls上
import action from '@/api/action'
axios.urls = action
// axios默认配置
axios.defaults.timeout = 10000; // 超时时间
// axios.defaults.baseURL = 'http://localhost:8080/j2ee15'; // 默认地址
axios.defaults.baseURL = action.SERVER;
//整理数据
// 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据
axios.defaults.transformRequest = function(data) {
data = qs.stringify(data);
return data;
};
// 请求拦截器
axios.interceptors.request.use(function(config) {
return config;
}, function(error) {
return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(function(response) {
return response;
}, function(error) {
return Promise.reject(error);
});
export default axios;
3.4.3、main.js で vue-axios を設定する
apiモジュールとvue-axiosモジュールをmain.jsファイルに導入します。
import axios from '@/api/http'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)
3.4.3. カプセル化された axios を使用してリクエストを送信する
インポートされた axios および qs モジュールをLogin.vueコンポーネントから削除します
import axios from 'axios'
import qs from 'qs'3.4.4. 変更された送信イベント
doSubmit() {
//设置登录访问地址
let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
// 使用json格式进行传值
let params = {
username: this.username,
password: this.password
}
this.axios.post(url, params).then(r => {
console.log(r);
if (r.data.success) {//判断success是否为true
// 为true给一个提示框
this.$message({
message: r.data.msg,
type: 'success'
});
} else {
this.$message({
message: r.data.msg,
type: 'warning'
});
}
}).catch(e => {
});
}
4. 登録機能の実装
4.1. ページの実装
もちろん、独自のデータベースとニーズに応じて独自のページを定義できます。
<template>
<div class="Register">
<el-form class="login-container">
<h1 class="title">用户注册</h1>
<el-form-item label="">
<el-input type="text" v-model="username" placeholder="输入账号" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="">
<el-input type="password" v-model="password" placeholder="输入密码" show-password autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="账号名称" label-width="80px" style="margin-left: 5px;" prop="name">
<el-input v-model="realname"></el-input>
</el-form-item>
<el-form-item label="性别" style="margin-left: 20px;">
<el-radio-group v-model="sex">
<el-radio label="1">男</el-radio>
<el-radio label="2">女</el-radio>
<el-radio label="3">其他</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="身 份 证" label-width="80px" style="margin-left: 0px;" prop="name">
<el-input v-model="idcard"></el-input>
</el-form-item>
<el-input type="textarea" :rows="2" placeholder="请输入地址" v-model="address">
</el-input>
<el-form-item style="margin-top: 30px;">
<el-button type="primary" style="width:100%;"
@click="Register()">注 册
</el-button>
</el-form-item>
<el-row style="text-align: center;margin-top:-10px">
<el-link type="primary">忘记密码</el-link>
<el-link type="primary" @click="Login()">用户登入</el-link>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
name: 'Register',
data() {
return {
username: "",
password: "",
realname: '',
sex: 0,
idcard: '',
address: '',
msg: '嗨！嗨！嗨！',
rules: {
realname: [{
required: true,
message: '请输入账号名称',
trigger: 'blur'
},
{
min: 3,
max: 18,
message: '长度在 3 到 18 个字符',
trigger: 'blur'
}
]
}
}
},
methods: {
Login() {
this.$router.push('/Login');
},
Register() {
let params = {
username: this.username,
password: this.password,
realname: this.realname,
sex: this.sex,
idcard: this.idcard,
address: this.address
};
//定义后端都请求地址
var url = this.axios.urls.SYSTEM_USER_DOREG;
console.log(params);
console.log(url);
//以下是post请求及整合资源
//通过qs中的stringify方法进行格式转换
//注意数据是保存到json对象的params属性
this.axios.post(url, params).then(r => {
console.log(r);
//如果携带的参数数据跟后端数据对应正确，说明登入成功，提示
if (r.data.success) {
this.$message({
showClose: true,
message: r.data.msg,
type: 'success'
});
//注册完成后自动进入登入界面
this.$router.push('/Login');
} else {
//如果携带的参数数据跟后端数据对应错误，说明登入失败，提示
this.$message.error(r.data.msg);
}
}).catch(e => {
console.log(e);
});
}
}
}
</script>
<style scoped>
.login-wrap {
padding-top: 30px;
box-sizing: border-box;
width: 100%;
height: 100%;
background-image: url();
background-repeat: no-repeat;
background-position: center right;
background-size: 100%;
}
.login-container {
border-radius: 10px;
margin: 0px auto;
width: 350px;
padding: 30px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
text-align: left;
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
</style>
4.2. インターフェースとインターフェース実装クラスの定義
インターフェース
int insertSelective(User record);インターフェースの実装
@Override
public int insertSelective(User record) {
return userMapper.insertSelective(record);
}4.3. コントローラー層
コントローラーでメソッドを記述するには、springmvc の特定の基盤が必要です
@RequestMapping("/userRegister")
@ResponseBody
public JsonResponseBody<?> userRegister(UserVo userVo, HttpServletResponse response) {
//状态新注册默认为0
userVo.setStatus("0");
//因为ID为String类型需要手动设置，当然可以根据自己的需要改为Int类型
userVo.setId("6");
int i = userService.insertSelective(userVo);
if (i > 0) {
return new JsonResponseBody<>("用户注册完成！快去登入吧！", true, 0, null);
} else {
return new JsonResponseBody<>("用户注册失败！重新输入。", false, 0, null);
}
}4.4. テスト
3. クロスドメイン
1. クロスドメインの問題とは何ですか?
Cross-Origin Resource Sharing (CORS) とは、ブラウザー側では、セキュリティ ポリシーの制限により、異なるソース (ドメイン/プロトコル/ポート) 間の Web ページ (または Ajax リクエスト) が直接やり取りしたり相互にアクセスしたりできないという事実を指します。。同一生成元ポリシーは、ユーザー情報を保護し、悪意のある攻撃を防ぐために使用されるブラウザーのセキュリティ メカニズムです。
同一オリジン ポリシーでは、Web ページが同じオリジンのリソースとのみ対話できるようにする必要があります。オリジンはプロトコル、ドメイン名、ポート番号で構成されます。オリジンに一貫性がない場合、ブラウザはクロスドメインリクエストをブロックします。たとえば、Web ページがドメイン A で実行されており、JavaScript を介してドメイン B に AJAX リクエストを送信しようとすると、クロスドメインの問題が発生します。
2. クロスドメインの問題を解決する
クロスドメイン フィルターCorsFilter2 をプロジェクトに記述します。
package com.zking.ssm.util;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
/**
* 配置tomcat允许跨域访问
*
* @author Administrator
*
*/
public class CorsFilter2 implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
throws IOException, ServletException {
HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
// Access-Control-Allow-Origin就是我们需要设置的域名
// Access-Control-Allow-Headers跨域允许包含的头。
// Access-Control-Allow-Methods是允许的请求方式
httpResponse.setHeader("Access-Control-Allow-Origin", "*");// *,任何域名
httpResponse.setHeader("Access-Control-Allow-Headers", "responseType,Origin, X-Requested-With, Content-Type, Accept");
httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");
//允许客户端处理一个新的响应头jwt
//httpResponse.setHeader("Access-Control-Expose-Headers", "jwt,Content-Disposition");
filterChain.doFilter(servletRequest, servletResponse);
}
@Override
public void destroy() {
}
}web.xml にフィルター構成を追加すると、クロスドメインの問題は解決されます。
<!--CrosFilter跨域过滤器-->
<filter>
<filter-name>corsFilter</filter-name>
<filter-class>com.zking.ssm.util.CorsFilter2</filter-class>
</filter>
<filter-mapping>
<filter-name>corsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>私の共有はこれで終わりです。皆さんもコメント欄で議論してください。！！