2018年1月

请输入图片描述

#include <iostream>

/* run this program using the console pauser or add your own getch, system("pause") or input loop */

int main(int argc, char** argv) {
    int n = 5;
    int a[100][100];
    int center = 0;
    int x,y = 1;
    int way = 4;//1上 2下 3左 4右 
    if(n % 2 == 0){ //偶数的话 是在中间位置 
        x = n/2;
        y = n/2+1;
    }else{//奇数的话就是左下偏移一位 
        x = n/2+1;
        y = n/2+1;
    }
    int k = 2;
    int t = 0;
    for(int i = 1 ;i<= n*n; i++){
        if(t == 4){
            t = 0;
            k++;
        }
         if(k*k == i){
             if(k%2 == 0){ //偶数的话平方在左上角  走完了 
                 way = 3;
             }else{ //奇数在右下角 
                 way = 4; //走完了 
             }
            t=4;
        }else if( k*k - (k-1) == i){
            if(k%2 == 0){ //偶数的话平方在右上角 
                 way = 3;
             }else{ //奇数在左下角 
                 way = 4;
             }
            t++;
        }else if(k*k - (k-1)*2 == i){
            if(k%2 == 0){ //偶数的话平方在右下角  
                 way = 1;
             }else{ //奇数在左上角 
                 way = 2;
             }
            t++;
        }else if(k*k - (k-1)*3 == i){
            if(k%2 == 0){ //偶数的话平方在左下角 
                 way = 4;
             }else{ //奇数在右上角 
                 way = 3;
             }
            t++;
        }
        a[x-1][y-1] = i;
        if(way == 1){ //上 
            y--;
        }else if(way == 2){ //下 
            y++;
        }else if(way == 3)//左
        {
            x--;    
        }else if(way == 4) //右
        {
            x++;    
        } 
        
        
    }
    for(int i = 0;i<n;i++){
        for(int j=0;j<n;j++){
            printf("%d\t",a[j][i]);
        }
        printf("\n");
    }
    return 0;
}

官方实现方法

#include<cstdio>
#include<cstdlib>
#include<cstring>
int a[100][100];
int main()
{
  freopen("snake.in","r",stdin);
  freopen("snake.out","w",stdout);
  int bj_a,bj_b,num=1,n,sx,i,j,sum=0;
  cin>>n;
  bj_a=n/2;
  bj_b=n/2;
  a[bj_a][bj_b]=num;
  sx=1;
  while(num<n*n)
  {
    num++;
    bj_b++;
    a[bj_a][bj_b]=num;
    while(bj_a>n/2-sx)
    {
      bj_a--;
      num++;
      a[bj_a][bj_b]=num;
    }
    while(bj_b>n/2-sx)
    {
      bj_b--;
      num++;
      a[bj_a][bj_b]=num;
    }
    while(bj_a<n/2+sx)
    {
      bj_a++;
      num++;
      a[bj_a][bj_b]=num;
    }
    while(bj_b<n/2+sx)
    {
      bj_b++;
      num++;
      a[bj_a][bj_b]=num;
    }
    sx++;
  }
  bj_b++;
  num++;
  a[bj_a][bj_b]=num;
  for(i=0;i<n;i++)
    for(j=0;j<n;j++)
    {
      if(i==j||i+j==n)
        sum+=a[i][j];
    }
  for(i=0;i<n;i++)
  {
    for(j=0;j<n-1;j++)
      printf("%d ",a[i][j]);
    printf("%d",a[i][j]);
    printf("\n");
  }
  printf("%d\n",sum);
  return 0;
}

React

  • SPA项目初始化(DVA)https://github.com/dvajs/dva
    • 是一个集React+Redux+React-Router+Redux-Saga 快速开发框架
    • MVVM模式 数据都是从顶层下发单向流动 需要更改数据则通过dispatch回调到顶层更改 如果要ajax来获取数据则通过effects调用yield call(Bind,{payload}); yield 通过异步调用Service层的方法实现获取数据 第二个参数是发送参数
    • 通过yield put 调用reducers层更改store里面的数据 再通过props 下发数据给组件
  • Connect 通过Connect 组件才可以通过props获取到顶层的数据
  • 无状态组件(通过函数式编程 只保留一个函数的组件 只根据Props来显示对应内容 不会涉及更改Props的内容) 高阶组件 -》 高阶组件是由若干个无状态组件组成 负责dispath 对应事件更改对应State来实现组件的通信与刷新
  • Model层的subscriptions 订阅state更改事件以及路由更改事件 可以根据更改事件执行对应操作
  • ...拓展运算符 用这个可以实现把拓展符后面的变量当做参数数组实现传入
  • 解构
    如下
const{
            dispatch,
            user:{
            isok,
            info
        }} = this.props;

es6新特性
会自动把this.props里面的对应对象赋值给dispath,user,等……

未完待续。。

来源:https://www.cnblogs.com/wb7753/p/7496492.html
一、配置项目工程

初始化工程
mkdir RSPA
cd RSPA
npm init
配置package.json中的dependencies、devDependencies
复制代码
在package.json里面dependencies依赖包的版本号前面的符号有两种,一种是~,一种是^:
1.~的意思是匹配最近的小版本 比如~1.0.2将会匹配所有的1.0.x版本,但不匹配1.1.0
2.^的意思是最近的一个大版本 比如1.0.2 将会匹配 所有 1.x.x, 但不包括2.x.x
"dependencies": {
"isomorphic-fetch": "^2.2.1",
"prop-types": "^15.5.10",
"react": "^15.5.0",
"react-dom": "^15.5.0",
"react-redux": "^5.0.5",
"react-router": "^2.8.1",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.22.0",
"jsx-loader": "~0.13.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
}
复制代码
执行npm install,下载依赖库(项目根目录会生成node_modules文件夹,依赖库放入其中)
--1.npm install 会根据package.json中配置的dependencies、devDependencies中配置的依赖包进行下载(区别:前者是项目正常运行所需要的依赖;后者是开发时项目所需的依赖项)
--2.当需要添加新依赖时,安装在dependencies执行:
npm install packagename --save
--2.安装在devDependencies中执行:
npm install packagename --save-dev
配置webpack.config.js文件
按 Ctrl+C 复制代码

// 推荐学习阮一峰老师webpack教程
// gitHub地址:https://github.com/ruanyf/webpack-demos
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const ROOT_PATH = path.resolve(__dirname);
const SRC_PATH = path.resolve(ROOT_PATH, 'src');
const ENTRY_FILE = path.resolve(SRC_PATH, 'index');
const BUILD_PATH = path.resolve(ROOT_PATH, 'public/dist');

module.exports = {

entry: {
    bundle: ENTRY_FILE
},
output: {
    publicPath: '/public/dist/',
    path: BUILD_PATH,
    filename: '[name].js'
},
module: {
    loaders: [
        {
            test: /\.js[x]?$/,
            exclude: /^node_modules$/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        },
        {
            test: /\.css$/,
            loader: 'style-loader!css-loader?modules'
        },
        {
            test: /\.(png|jpg)$/,
            loader: 'url-loader?limit=8192'
        }
    ]
},
plugins: [
    new webpack.DefinePlugin({
        __DEV__: JSON.stringify(process.env.NODE_ENV)
    }),
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    })
]

}
按 Ctrl+C 复制代码
配置package.json中的scripts值
"scripts": {

"dev": "webpack-dev-server --devtool eval --process --colors",
"hot": "webpack-dev-server --hot --inline --progress --colors",
"dist": "webpack --config webpack.config.js --progress --colors --watch -p"

}
创建存放项目各资源文件夹
复制代码
RSPA
|--node_modules
|--public

    |--dist
    |--index.html

|--src

    |--component
          |--app.js
    |--style
    |--index.js

|--package.json
|--webpack.config.js
复制代码
构建webpack.config.js中配置的入口文件index.js及发布的index.html
按 Ctrl+C 复制代码

// index.js
import React from 'react'
import { render } from 'react-dom'
import App from './component/app'

render(

<App />,
document.querySelector('#wrapper')

);
按 Ctrl+C 复制代码
按 Ctrl+C 复制代码

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>RSPA</title>

</head>
<body>

<div id="wrapper"></div>

  <!-- 此处/public/dist与webpack.config.js中output字段的publicPath属性配置有关 -->

<script type="text/javascript" src="/public/dist/bundle.js"></script>

</body>
</html>
按 Ctrl+C 复制代码
二、开始项目

通过react-router构建项目导航
开发基本组件
通过redux进行状态管理
通过fetch模块对动态数据进行请求
三、编译项目

npm run dev 开发者模式运行,执行package.json中script字段dev属性后面的命令,修改文件后刷新页面可看最新效果
npm run hot 热部署模式,修改文件后,会自动重新编译,并显示最新效果
npm run dist 发布模式,运行后会在webpack.config.js中output字段属性path配置的路径下,生成编译后的js文件
  ※注意※,如果因手法原因导致8080端口被占用,如何快速kill掉占用的应用:

复制代码
--windows下输入以下命令,最后的数值就是PID号
netstat -ano | findstr "8080"
--Linux下输入

netstat -anp | grep 8080

--然后window下可以用任务管理器-->详细信息查找此PID对应的程序并右键结束任务
--Linux下直接kill -9 PIDNUM结束此占用的进程
复制代码

四、对项目进行详细需求设计,绘制流程图,细分任务完成节点,完成项目记录

GITHUB:https://github.com/wangbo7753/RSPA