react实例——学生管理系统——登录与注册遇到的问题（1）

出现的错误以及解决或者经验认识总结

经验认识总结

1.本次练习采用的是useRoutes、NavLink、OutLet来实现路由的跳转、渲染

1. 　　Navlink替换原生h5中的a标签，<NavLink to='/+真实路径'>链接名字</NavLink>

2. 　　<OutLet/>是占位符，路由组件将来要在哪里渲染，就把它放在那里

3. 　　useRoutes用来进行路由的懒加载注册，将所有的路由都写在这里。

　　在设计时，注册与登录宽度一致，高度设为auto任其根据需要撑开，注册登录都在w-data中进行展示，因此占位符就放这里标签里面，当点击NavLink链接后，路由按to写的方式，在useRoutes封装的路由中（路由表在utils中创建）寻找该路径对应的组件，然后将组件展示在占位符所在之处。

2.写了样式记得引入

3.react实际上就一个index.html,关于所谓路由跳转页面，实际上就是在App中展示不同的div块，所以App.js,写公共的路由注册：

出现的错误对应解决方案

1.react组件中直接在src中写图片地址，图片加载失败

解决方法：

import sysIcon from '../../assets/imgs/systemIcon.jpeg'

<img src={sysIcon} alt="加载失败" />

 2.Module not found: Error: Can‘t resolve ‘querystring‘ in

解决方法：

import qs from 'querystring';改为import qs from 'qs';

 3.当进行数据库连接后的模块化时，遇到“mongoose.Schema,Schema,XXXmodel(自己定义且要暴露出去的) is not a constructor”

解决方法：

——首先不建议放在server.js中，也就是说数据库的连接不要和服务器放在一个js文件中，在模型的使用文件中，使用暴露出来的（“mongoose.Schema,Schema,XXXmodel(自己定义且要暴露出去的））单独执行run code是成功的，说明语句是没问题的：

但是执行node server.js时，总会出现is not a constructor，通过观察暴露出的变量发现被暴露出来的mongoose是空的：

 

报错的文件顺序是这样的：server.js-->router.js--->admin.js，原因：当执行node server.js或者在server.js路径下 run code后，

server.js中执行到const router = require('./router')，找router.js,

router.js中执行到const AdminModel = require('../src/db/admin.js')就去了admin.js,

admin.js中执行到var mongoose = require('../../server/server');又去找server.js,但是这个时候还没执行到暴露mongoose，所以这个mongoose就是个空滴，其他的暴露同理。

那么，解决方案有两个：

——方法1：把数据库的定义放在server最开始，让它先被执行，这样当别人用的时候，mongoose已经暴露出去了。

——方法2：为了模块化设计，可以在src路径下建一个db文件，新建db.js,专门写数据库连接，在它的同级新建那些创建表（或者说model）的js文件，各自写各自的，修改的时候也方便。

4.react项目执行npm start报错Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. options.allowedHosts[0] should be a non-empty string.

解决方案：删掉  "proxy": "http://localhost:3301"，前端代理方式换，参考https://stackoverflow.com/questions/70374005/invalid-options-object-dev-server-has-been-initialized-using-an-options-object

 5.新建server文件夹，里面新建server.js与router.js,前者为后端服务开启，后者为后端路由管理，这里跨域我选择了在服务器设置允许跨域，前端设置中间件的方式，我一直在尝试，但没有成功，主要遇到的问题是：按照github上create-react-app官方文档，设置完中间件以后，也配置了pathRewrite，是允许跨域了，但一直404，······对不起，我给前端丢人了，哭~，如有哪位大佬也遇到过，解决了，为了知识，跪求解决方案，真希望将来的工作中，后端兄弟能自己设置好，我感谢你了~

6.同步和异步的问题，由于usernameValid函数在调用的时候是异步请求，所以呢？这个函数还没有执行完，response还没得到数据，就会被执行数据操作，会报错的！！！

 

因此需要借助async和await来同步实现异步，就是等着，当response拿到以后再去进行数据操作，位置：

 

await放在异步请求的函数左边，在这个案例中，就是放在usernameValid左边，async放在离他最近的父函数左边

 

第二个问题就是关于前后端数据交互，这个其实和utils/index.jsx无关，但是原理还是一样的，它的作用是前端的页面跳转，而我所提到的是类似于如下这种：

 

　　前端调用了usernameValid函数，发送了一个ajax请求，并把username、identify带上-----后端server.js通过监听端口，看到了这个请求，并通过router.js进行匹配路由----匹配到了后就会触发自己的回调函数（request,response）,request就是前端的post请求，这里面就是数据，此时通过与数据库信息比对后，通过response.send({msg:"······"})响应给前端------前端变量response拿到数据进行下一步操作。

 

 

搜索

复制