django+react

流绪潜微梦 發表於 2020-2-17 11:00:00

<pre class="js_message_plain ng-binding">后端： </pre>
<pre class="js_message_plain ng-binding"> >>> pip install Django==1.11 >>> sudo pipinstall django-webpack-loader Successfully installed django-webpack-loader-0.6.0 >>>python -m django --version 1.11.11 需要解决跨域问题，前端才能访问 前端： node和npm安装，包下载： http://nodejs.cn/download/ 解压：/usr/local/application $ sudo tar xvJf node-v12.14.1-linux-x64.tar.xz sudo mv node-v12.14.1-linux-x64 nodejs sudo ln -s /usr/local/application/nodejs/bin/npm /usr/local/bin/ sudo ln -s /usr/local/application/nodejs/bin/node /usr/local/bin/</pre>
<pre class="js_message_plain ng-binding">webpack管理项目： </pre>
<pre class="js_message_plain ng-binding"> webpack 前端项目模块（css，js，img）管理工具，把项目所有依赖的库打包到一个或多个bundle文件（例如，bundle.js）。 babel Javascript 编译器，能把新的 ES6 语法转换成 ES5 语法，兼容现有的浏览器。 webpack-bundle-tracker 把 webpack 编译过程记录到文件（webpack-stats.json），供 django-webpack-loader 使用 3. 生成项目 * 创建 React 项目 在项目根目录下，新建 frontend 目录，使用 npm init 创建前端项目。 : $ mkdir frontend && cd frontend && npm init 目录结构如下： user@conti-del-lp-018:~/Documents/backup_code/new_atp/Fashion_ATP$ ll total 24 drwxrwxr-x 5 user user 4096 1月10 14:46 ./ drwxrwxr-x 3 user user 4096 1月10 14:46 ../ drwxrwxr-x 2 user user 4096 1月 9 16:21 Fashion_ATP/ drwxrwxr-x 4 user user 4096 1月10 14:46 frontend/ -rwxr-xr-x 1 user user809 1月 9 15:17 manage.py 4. 安装 React 开发相关的依赖 $ cd frontend $ npm install --save-dev babel-cli babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 react react-dom react-hot-loader webpack webpack-cli webpack-bundle-tracker webpack-dev-server 安装出现错误： Error: connect ECONNREFUSED 104.16.18.35:443 解决办法： 设置npm的代理： npm config set proxy=http://10.69.60.221:8080 ,npm config set registry=http://registry.npmjs.org 其中，--save-dev 会把依赖写入package.json。这些第三方库位于当前项目下node_modules目录。如果有些库需要全局使用， 安装时需要用-g选项。如果需要重装依赖库，只需要执行npm instal。 创建 webpack 配置文件 $ cd frontend $ mkdir -p assets/js $ touch webpack.config.js $ touch assets/js/index.js 其中，assets/js目录为我们代码所在目录。webpack.config.js是webpack的配置文件。assets/js/index.js是项目的入口文件。 webpack 从该文件开始加载所有项目依赖模块。Webpack 官方配置手册 5. 修改 webpack.config.js create-react-app创建多页面应用      </pre>
<pre class="js_message_plain ng-binding"> </pre>
1. /usr/local/application/nodejs/bin/create-react-app my-app
2. npm install jquery --save
3. npm install bootstrap@3 --save
4. 配置 config/webpack.config.js 文件，需要先运行 npm run       eject 命令（默认webpack的配置文件都是没有的，运行这个命令才能调出来）    run之前需要运行:         git add .         git commit -am "Save before ejecting"
 
前端遇到的相关问题：
问题1：      File "/usr/local/lib/python3.5/dist-packages/webpack_loader/loader.py", line 43, in filter_chunks      for regex in self.config['ignores'])      File "/usr/local/lib/python3.5/dist-packages/webpack_loader/loader.py", line 43, in <genexpr>      for regex in self.config['ignores'])      TypeError: string indices must be integers    解决办法：     npm install --save-dev webpack-bundle-tracker@0.4.3
<pre class="js_message_plain ng-binding"> </pre> 
来源：https://www.cnblogs.com/ting152/p/12320800.html

頁: [1]

琼殿技术论坛's Archiver

django+react