вя + elementUI завершить регистрацию и логин

1. ви , как вводить и конфигурацию с использованием фреймворки элемента-UI
1.1 для создания проекта с использованием вей V-Cli подмостей инструмента
вю INIT WebPack pro01

1,2 НПМ установка elementUI
корень CD pro01 # ввести новый проект
НПМ установить элемент-UI - S # модуль монтажный элемент-UI

## важных вещей , чтобы сказать три раза: в указанном месте !!! указанное место в указанном месте !!! ~~~ !!! добавить три строки кода
1.3 main.js найти в директории с исходниками проекта, и в указанном месте Добавьте три строки кода (main.js запись файла, строка вводится здесь, страница не будет введена)
Импорт из Vue «Вью»

Импорт ElementUI «UI-элемент». 1 // вновь добавляемые
импорт «UI-элементов / Библиотека /theme-chalk/index.css' // добавить два новых, пост-упаковку , чтобы избежать различных стилей, чтобы положить импорт App из «./app„ а до

импорта App из“» ./app
Импорт из маршрутизатора «./router»

Vue.use (ElementUI) // вновь добавленный 3
Vue.config.productionTip = ложь

1.4 Тест
изменения HelloWorld.vue добавлять компоненты , чтобы увидеть эффект elementUI

2. Вю + ElementUI дизайн целевой страницы

Примечание 1: См сопутствующей информации в стиле «css.txt»

Примечание 2: <стиль области видимости>
в вю компоненте добавлен в атрибуте стиля тегов в области видимости, чтобы указать , что это момент , действующий на модуле стиля, для достижения приватизации объекта хорошего стиля

Примечание 2: Автозаполнение = «OFF»
атрибут автозаполнения является новым в свойствах HTML5, от ----- автоматически отключается

< Шаблон > 
    < DIV класс = "Войти намотка" > 
        < эль-форма класс = "Вход-контейнер" > 
            < h1 класс = "название" >用户登录</ h1 > 
            < эль-форм-пункт этикетка = "" > 
                < эль-вход тип = "текст" v-модель = "имя пользователя" автозаполнения = "выключено" > </ эш-вход > 
            </ эш-форма-элемент > 
            <эль-форм-элемент этикетка = «» > 
                < эль-входтип = "пароль" v-модель = "пароль" автозаполнение = "выключен" > </ эш-вход > 
            </ эш-форма-элемент > 
            < эш-форма-элемент > 
                < эш-кнопка типа = "первичный" стиль = "ширина: 100%;" @ Щелкните = "doSubmit ()" >提交</ эль-кнопка > 
            </ эль-форм-элемент > 
            < эль-строка стиль = "выравнивания текста: центр; рентабельность-топ: -10px ;;" > 
                < Эль-ссылку типа =»> 
                < Эль-ссылку тип = "первичный" @ Щелкните = "doRegister ()" >用户注册</ эль-ссылка > 
            </ эль-строка > 
        </ эль-форма > 
    </ DIV > 
</ шаблон >

3. Предпосылки взаимодействия (Вардар / QS / VUE-Вардар)
3,1 Вардар
Вардар является vue2 поощрять использование облегченную версию AJAX. Он основан на обещании библиотеки HTTP. Он создает запросы XMLHttpRequest из браузера, используемого в сочетании с Vue очень хорошо.

1. Не по теме:
vue.js знаменитой семьи ведра серии: Вьет-маршрутизатор, vuex, VUE -resource, в сочетании с наращиванием инструментами вю-кли, ядро представляет собой полный проект составляет вю.
Вьет-ресурс , который является Vue.js из подключаемого модуля, он может инициировать запрос через XMLHttpRequest или JSONP и реакцию на лечении, но после обновления ви до 2,0,
авторы не объявлены больше не обновления Вьют-ресурсы, но рекомендуется AXIOS

2.GET提交
axios.get('/user', {//注意数据是保存到json对象的params属性
params: {
ID: 12345
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});

3.POST提交
axios.post('/user', {//注意数据是直接保存到json对象
firstName: 'Fred',
lastName: 'Flintstone'
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});

注1：axios跨域问题
会一直报错：“http://127.0.0.1:8848' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header”
因为使用了前后端分离开发，跨域访问了，解决方案：需要配置tomcat允许跨域访问，
tomcat跨域配置方法很多，但最简单的方式是自己写一个过滤器CorsFilter实现，添加一个响应头
Access-Control-Allow-Origin即可
httpResponse.addHeader("Access-Control-Allow-Origin", "*");//*表示任何域名
httpResponse.addHeader("Access-Control-Allow-Origin", "http://localhost:80");

Access-Control-Allow-Origin:* #则允许所有域名的脚本访问该资源。
Access-Control-Allow-Origin:https://www.fujieace.com #允许特定的域名访问

注2：axios.get提交没有问题，axios.post提交后台接收不到数据
因为POST提交的参数的格式是Request Payload，这样后台取不到数据的(详情见资料“05 Vue中axios踩坑之路-POST传参 - RainSun - CSDN博客.mht”)，
解决方案：使用qs.js库，将{a:'b',c:'d'}转换成'a=b&c=d'

注3：为简化axios使用，还可以使用axios全局配置及拦截器，详情见资料“api/http.js”
axios.defaults.baseURL = 'https://api.example.com';
//axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;//自定义请求头，添加认证令牌
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

注4：为方便开发，建议对请求地址进行封装，详情见资料“api/action.js”

注5：^_^~~~~为进一步简化开发，将action.js的URL地址封装到axios.urls属性上

вя + elementUI завершить регистрацию и логин

рекомендация