2018/04/26

[mowatermelon]

/**
 * 定义应用路由
 */
import React from 'react';
import {
  Router,
  // browserHistory,
  hashHistory,
} from 'react-router';

// 路由配置规则参考： https://github.com/ReactTraining/react-router/blob/v3/docs/guides/RouteConfiguration.md#configuration-with-plain-routes
// 一下部分是由 ICE 相关工具自动生成的路由，请勿随意改变，否则可能会出现一些异常情况
// <!-- auto generated routes start -->
import Home from './pages/Home';
import BlankLayout from './layouts/BlankLayout';
import NotFound from './pages/NotFound';

const autoGeneratedRoutes = [
  {
    path: '/',
    childRoutes: [{ path: '*', childRoutes: [], component: NotFound }],
    component: BlankLayout,
    indexRoute: { component: Home },
  },
];

// <!-- auto generated routes end -->

// 自定义路由，如果 path 相同则会覆盖自动生成部分的路由配置
const customRoutes = [];

export default (
  <Router
    history={hashHistory}
    routes={[...autoGeneratedRoutes, ...customRoutes]}
  />
);

[mowatermelon]

import ReactDOM from 'react-dom';
// 载入默认全局样式 normalize 、.clearfix 和一些 mixin 方法等
import '@icedesign/base/reset.scss';
import routes from './routes';

// 以下代码 ICE 自动生成, 请勿修改
const ICE_CONTAINER = document.getElementById('ice-container');

if (!ICE_CONTAINER) {
  throw new Error('当前页面不存在 <div id="ice-container"></div> 节点.');
}

ReactDOM.render(routes, ICE_CONTAINER);

[mowatermelon]

.table-container {
  display: table;
  .cell {
    display: table-cell;
    vertical-align: middle;
  }
}

.help-center{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 340px;
  width: 795px;

}

[mowatermelon]

<div id="app">
  <router-view></router-view>
</div>

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }，
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        { 
           path: '', 
           component: UserHome 
        },
         // ...其他子路由     
      ]
    }
  ]
})   

[mowatermelon]

            mui.ajax('http://dstantside.com/Sdnote/api/Login/register',{
                crossDomain:true,
                data:{
                    "userName":"12345",
                    "password":"494296145",
                    "Email":"1234",
                    "phone":"12345",
                    "age":"12",
                    "sex":1
                },
//              dataType:'jsonp',//服务器返回json格式数据
                type:'post',//HTTP请求类型
                timeout:10000,//超时时间设置为10秒；
                processData:false,
                headers: {  
                  'Accept': 'application/json',  
                  'Content-Type': 'application/x-www-form-urlencoded',
                  'Access-Control-Allow-Origin':'*'
                },  
                credentials: 'include',                   
                success:function(data){
                    console.log('dsdfafd')
                    //服务器返回响应，根据响应结果，分析是否登录成功；
                    console.log(data)
                },
                error:function(xhr,type,errorThrown){
                    //异常处理；
                    console.log(xhr,type,errorThrown);
                }
            });

            mui.post('http://dstantside.com/Sdnote/api/Login/register',{
                    "userName":"12345",
                    "password":"494296145",
                    "Email":"1234",
                    "phone":"12345",
                    "age":"12",
                    "sex":1
                },function(data){
                    //服务器返回响应，根据响应结果，分析是否登录成功；
                    console.log('dsdfafd')
                    //服务器返回响应，根据响应结果，分析是否登录成功；
                    console.log(data)
                },'json'
            );

            mui.get('http://dstantside.com/Sdnote/api/Login/register',{
                    "userName":"12345",
                    "password":"494296145",
                    "Email":"1234",
                    "phone":"12345",
                    "age":"12",
                    "sex":1
                },function(data){
                    //服务器返回响应，根据响应结果，分析是否登录成功；
                    console.log('dsdfafd')
                    //服务器返回响应，根据响应结果，分析是否登录成功；
                    console.log(data)
                },'json'
            );  

[mowatermelon]

CROS常见header CORS具有以下常见的header

Access-Control-Allow-Origin: http://kbiao.me

Access-Control-Max-Age: 3628800

Access-Control-Allow-Methods: GET，PUT, DELETE

Access-Control-Allow-Headers: content-type "Access-Control-Allow-Origin"表明它允许" http://kbiao.me "发起跨域请求

"Access-Control-Max-Age"表明在3628800秒内，不需要再发送预检验请求，可以缓存该结果（上面的资料上我们知道CROS协议中，一个AJAX请求被分成了第一步的OPTION预检测请求和正式请求）

"Access-Control-Allow-Methods"表明它允许GET、PUT、DELETE的外域请求

"Access-Control-Allow-Headers"表明它允许跨域请求包含content-type头

当然在处理这个问题的时候前端也有不少坑，特别是Chrome浏览器不允许localhost的跨域请求，详细方案见我项目中负责前端解决方案的小伙伴。